为何选择 Astro？

Astro 是一个用于构建内容驱动型网站（如博客、营销和电子商务网站）的 Web 框架。Astro 以开创性的前端架构而闻名，与其他框架相比，它减少了 JavaScript 的开销和复杂性。如果你需要一个加载速度快且具有出色 SEO 的网站，那么 Astro 非常适合你。

特性

Astro 是一个一体化的 Web 框架。它内置了创建网站所需的一切。还有数百种不同的集成和API 钩子可用于根据你的确切用例和需求自定义项目。

一些亮点包括：

• 群岛（Islands）：一种基于组件的 Web 架构，为内容驱动的网站进行了优化。
• UI 无关：支持 React、Preact、Svelte、Vue、Solid、HTMX、Web 组件等。
• 服务器优先：将高昂的渲染任务从访问者的设备上移开。
• 默认为零 JS：更少的客户端 JavaScript，避免拖慢你的网站。
• 内容集合：为你的 Markdown 内容组织、验证并提供 TypeScript 类型安全。
• 可定制：Partytown、MDX 和数百种集成可供选择。

设计原则

这里有五个核心设计原则，有助于解释我们为什么构建 Astro，它旨在解决什么问题，以及为什么 Astro 可能是你的项目或团队的最佳选择。

Astro 是……

1. 内容驱动：Astro 为展示你的内容而设计。
2. 服务器优先：当网站在服务器上渲染 HTML 时，运行速度更快。
3. 默认快速：在 Astro 中构建一个缓慢的网站应该是不可能的。
4. 易于使用：你不需要成为专家也能用 Astro 构建东西。
5. 以开发者为中心：你应该拥有成功所需的资源。

内容驱动

Astro 是为构建内容丰富的网站而设计的。这包括营销网站、出版网站、文档网站、博客、作品集、落地页、社区网站和电子商务网站。如果你有内容要展示，它需要快速地送达你的读者。

相比之下，大多数现代 Web 框架是为构建 Web 应用程序 而设计的。这些框架擅长在浏览器中构建更复杂的、类似应用程序的体验：登录后的管理仪表盘、收件箱、社交网络、待办事项列表，甚至是像 Figma 和 Ping 这样的原生级应用程序。然而，由于这种复杂性，它们在交付内容时可能难以提供出色的性能。

Astro 从最初作为静态网站生成器开始就专注于内容，这使得 Astro 能够合理地扩展到高性能、强大、动态的 Web 应用程序，同时仍然尊重你的内容和你的受众。Astro 对内容的独特关注让 Astro 能够做出权衡，并提供无与伦比的性能特性，而这些特性对于更侧重于应用程序的 Web 框架来说是无法实现的。

服务器优先

Astro 尽可能地利用服务器端渲染，而不是在浏览器中进行客户端渲染。这与传统的服务器端框架——如 PHP、WordPress、Laravel、Ruby on Rails 等——几十年来一直使用的方法相同。但你不需要学习第二种服务器端语言来实现它。使用 Astro，一切仍然只是 HTML、CSS 和 JavaScript（或者如果你愿意，也可以是 TypeScript）。

这种方法与 Next.js、SvelteKit、Nuxt、Remix 等其他现代 JavaScript Web 框架形成对比。这些框架是为了对整个网站进行客户端渲染而构建的，它们包含服务器端渲染主要是为了解决性能问题。这种方法被称为单页应用（SPA），与 Astro 的多页应用（MPA）方法形成对比。

SPA 模型有其优点。然而，这些优点是以增加复杂性和性能权衡为代价的。这些权衡会损害页面性能——例如可交互时间（TTI）这样的关键指标——这对于首次加载性能至关重要的内容型网站来说意义不大。

Astro 的服务器优先方法允许你仅在必要时才选择加入客户端渲染。你可以选择添加在客户端运行的 UI 框架组件。你可以利用 Astro 的视图过渡路由器来更精细地控制页面过渡和动画。Astro 的服务器优先渲染，无论是预渲染还是按需渲染，都提供了高性能的默认设置，你可以对其进行增强和扩展。

默认快速

良好的性能总是很重要的，但对于那些成功依赖于展示内容的网站来说，它尤其关键。事实证明，糟糕的性能会让你失去参与度、转化率和金钱。例如：

• 速度每快 100 毫秒 → 转化率提高 1%（Mobify，年收入增加 38 万美元）
• 速度提高 50% → 销售额增加 12% (AutoAnything)
• 速度提高 20% → 转化率增加 10% (Furniture Village)
• 速度提高 40% → 注册量增加 15% (Pinterest)
• 速度快 850 毫秒 → 转化率增加 7% (COOK)
• 每慢 1 秒 → 用户减少 10% (BBC)

在许多 Web 框架中，很容易在开发过程中构建一个看起来很棒的网站，但一旦部署，加载速度却非常慢。JavaScript 通常是罪魁祸首，因为许多手机和低功耗设备的运行速度很少能与开发者的笔记本电脑相媲美。

Astro 的魔力在于它如何将上面解释的两个价值观——以内容为中心和服务器优先的架构——结合起来，做出权衡并提供其他框架无法提供的功能。其结果是为每个网站提供开箱即用的惊人 Web 性能。我们的目标是：使用 Astro 构建一个慢速网站几乎是不可能的。

一个 Astro 网站可以比使用最流行的 React Web 框架构建的相同网站加载速度快 40%，JavaScript 少 90%。但不要只听我们的一面之词：看看 Astro 的性能如何让 Ryan Carniato（Solid.js 和 Marko 的创建者）无言以对。

易于使用

Astro 的目标是让每个 Web 开发者都能使用。无论技术水平或过往的 Web 开发经验如何，Astro 都旨在让人感到熟悉和易于上手。

.astro UI 语言是 HTML 的超集：任何有效的 HTML 都是有效的 Astro 模板语法！所以，如果你会写 HTML，你就能写 Astro 组件！但是，它也结合了一些我们最喜欢的功能，这些功能借鉴了其他组件语言，如 JSX 表达式（React）和默认的 CSS 作用域（Svelte 和 Vue）。这种与 HTML 的紧密关系也使得使用渐进式增强和常见的可访问性模式变得更容易，而没有任何开销。

然后，我们确保你也可以使用你已经熟悉的、最喜欢的 UI 组件语言，甚至可以重用你可能已经拥有的组件。React、Preact、Svelte、Vue、Solid 等，包括 Web 组件，都支持在 Astro 项目中编写 UI 组件。

Astro 被设计得比其他 UI 框架和语言更简单。一个很重要的原因是 Astro 被设计为在服务器上渲染，而不是在浏览器中。这意味着你不需要担心：hooks（React）、过时闭包（也是 React）、refs（Vue）、observables（Svelte）、atoms、selectors、reactions 或 derivations。服务器上没有响应式，所以所有这些复杂性都消失了。

我们最喜欢的一句话是：选择性加入复杂性。我们设计 Astro 的目的是从开发者体验中移除尽可能多的“必要复杂性”，尤其是在你第一次上手时。你可以只用 HTML 和 CSS 在 Astro 中构建一个“Hello World”示例网站。然后，当你需要构建更强大的东西时，你可以逐步地接触新的功能和 API。

以开发者为中心

我们坚信，只有当人们喜欢使用 Astro 时，它才算是一个成功的项目。Astro 拥有一切你需要的东西，以支持你用 Astro 进行构建。

Astro 投入了大量精力在开发者工具上，比如从你打开终端的那一刻起就有的出色 CLI 体验，用于语法高亮、TypeScript 和智能提示的官方 VS Code 扩展，以及由数百名社区贡献者积极维护并提供 14 种语言版本的文档。

我们在 Discord 上有一个热情、尊重、包容的社区，随时准备提供支持、动力和鼓励。可以开启一个 #support 帖子来为你的项目寻求帮助。访问我们专门的 #showcase 频道，分享你的 Astro 网站、博客文章、视频，甚至是正在进行中的工作，以获得安全的反馈和建设性的批评。参加定期的现场活动，比如我们每周的社区电话会议 “Talking and Doc’ing”，以及 API/bug 大扫除活动。

作为一个开源项目，我们欢迎来自所有经验水平的社区成员的各种类型和规模的贡献。我们邀请你加入路线图讨论，共同塑造 Astro 的未来，并希望你能为核心代码库、编译器、文档、语言工具、网站和其他项目贡献修复和功能。