Astro 是一个多合一的 Web 框架，主要用于构建快速、聚焦内容为中心的系统。
为什么是选择 Astro ？而不是另一个 Web 框架？根据官网介绍，主要有五个核心设计原则来帮助解释我们为什么要选择 Astro，它存在要解决的问题，以及为什么 Astro 可能是您的项目或团队的将来最佳选择。
Github地址：github.com/withastro/a… （⭐️15.6K+）
首先，Astro是个什么？
- Content-focused：聚焦内容，以内容为中心。Astro 专为内容丰富的网站而设计，适用于重内容、轻交互场景下的上层研发框架，比如大多数的电商系统、证券系统等。
- Server-first：服务器渲染优先，网站在服务器上呈现 HTML页面 时运行速度更快。
- Fast by default：默认配置快速，在 Astro 中构建慢速网站应该是不可能的。
- Easy to use：上手门槛低，使用简单，容易上手，按照Demo即可使用 Astro 构建某些东西。
- Fully-featured, but flexible：功能齐全，组装灵活，超过 100 多种 Astro 集成组件可供选择。
Content-focused 内容为王
Astro 专为构建内容丰富的网站而设计。 这包括大多数营销网站、发布网站、文档网站、博客、投资组合和一些电子商务网站。
相比之下，大多数现代 Web 框架都是为构建Web 应用程序而设计的。这些框架最适合在浏览器中构建更复杂、类似应用程序的体验：登录的管理仪表板、收件箱、社交网络、待办事项列表，甚至像Figma和Ping这样的原生应用程序。
这是了解 Astro 最重要的区别之一。Astro 对内容的独特关注让 Astro 可以做出权衡并提供非常强悍的性能特性，而这些特性对于更多以应用程序为中心的 Web 框架来说是没有意义的。
不合适Astro的情况
如果您的项目属于要构建Web 应用程序（内容不丰富，重视交互）之类的，Astro 可能不是您项目的正确选择……没关系！ 查看Next.js，了解一个以应用程序为中心的优秀 Web 框架替代方案。
Server-first 服务器渲染优先
Astro 尽可能多地利用服务器端渲染而不是客户端渲染。 这与传统服务器端框架（PHP、WordPress、Laravel、Ruby on Rails 等）几十年来一直使用的方法相同。但是你不需要学习第二种服务器端语言来解锁它。使用 Astro，前端开发工程师关注的任然是 HTML、CSS 和 JavaScript（或 TypeScript）。
这种与 Next.js、SvelteKit、Nuxt、Remix 等其他现代 JavaScript Web 框架形成鲜明对比。这些框架需要对整个网站进行客户端渲染，并包括服务器端渲染，主要是为了解决性能问题。这种方法被称为单页应用程序 (SPA) ，与 Astro 的多页应用程序 (MPA) 方法形成对比。
SPA 模式其实也有它的好处。SPA 模式都是需要以额外的复杂性和性能权衡为代价的。这些权衡会损害页面性能——包括交互时间 (TTI)等关键指标——这对于首次加载性能至关重要的以内容为中心的网站来说没有多大意义。
Fast by default 默认配置快速
优越的性能始终很重要，但对于以内容为主的网站特别重要。通过某些调查（官网举例），糟糕的用户体验会让一个项目降低用户体验度、降低产品转化率和网站的价值。例如：
- 每 100 毫秒更快 → 产品转化次数增加 1%（Mobify，年收入 +380,000 美元）
- 速度提高 50% → 销售额增加 12% ( AutoAnything )
- 速度提高 20% → 转化率提高 10%（Furniture Village）
- 速度提高 40% → 注册人数增加 15% ( Pinterest )
- 快 850 毫秒 → 转化次数增加 7% ( COOK )
- 每慢 1 秒 → 用户减少 10% ( BBC )
在许多 Web 框架中，在浏览器端快速构建渲染，会给用户一个非常好的感觉。但在资源加载后加载速度非常慢，JavaScript 通常是罪魁祸首，因为用户的手机和低功率设备很少能与开发人员笔记本电脑的速度相提并论。
Astro 的魔力在于它如何结合上面解释的两个价值——内容关注与服务器优先的 MPA 架构——进行权衡并提供其他框架无法提供的功能。结果是每个网站都具有惊人的 Web 性能，开箱即用。我们的目标：用 Astro 建立一个缓慢的网站几乎是不可能的。
与使用最流行的 React Web 框架构建的相同网站相比，Astro 网站的加载速度可以提高 40%，而 JavaScript 少 90% 。但不要相信我们的话：观看 Astro 的表现让 Ryan Carniato（Solid.js 和 Marko 的创建者）speechless.。
Easy to use 上手门槛低
Astro 的目标是让每个 Web 前端开发人员都可以熟悉使用。 Astro 设计宗旨就是，让开发者降低使用门槛，使用框架时候，不管技术经验如何，都会感觉熟悉和平易近人。
但是首先确保拥有自己熟悉、喜爱的 UI 组件语言。React、Preact、Svelte、Vue、Solid、Lit 和其他几个都支持在 Astro 项目中创建新的 UI 组件。
Astro 想确保也具有出色的内置组件语言。与React的.jsx，VUE的.vue类型，Astro 框架内创建了独特的.astro视图语言。且深受 HTML 的影响：任何有效的 HTML 片段都已经是有效的 Astro 组件！
同时也结合了一些我们最喜欢的从其他组件语言中借鉴的特性，例如 JSX 表达式 (React) 和默认的 CSS 范围（Svelte 和 Vue）。
Astro 被设计为比其他 UI 框架和语言更简单。造成这种情况的一个重要原因是 Astro 被设计为主要在服务器渲染，而不是在浏览器渲染。这意味着您无需担心：hooks（React）、state 闭包作用域（ React）、refs（Vue）、observables（Svelte）、atoms、selectors、reactions 或者derivations 。
vue最核心的一句话就是：渐进式开发 。 Astro 设计同样也参考了这一点。是为了尽可能多地消除开发人员体验中的“所需复杂性”。尤其是当开发者第一次上手时。可以在 Astro 中仅使用 HTML 和 CSS 构建一个“Hello World”示例网站。然后，当需要构建更强大的东西时，可以逐步接触到新功能和 API。
Fully-featured, but flexible 功能齐全，组装灵活
Astro 是一个一体化的 Web 框架，它包含构建网站所需的一切。 Astro 包括组件语法、file-based 路由、资源处理、构建过程、bundling、optimizations、数据获取等。您可以构建出色的网站，而无需超出 Astro 的核心功能集。
如果您需要更多功能，可以使用100 多种集成插件来扩展 Astro，例如React、Svelte、Vue、Tailwind CSS、MDX、图像优化等。
Astro 与 UI 无关，这意味着您可以自带 UI 框架 (BYOF) 。Astro 正式支持 React、Preact、Solid、Svelte、Vue 和 Lit。您甚至可以在同一页面上混合和匹配不同的框架，使未来的迁移更容易，并防止项目锁定到单个框架。
