为什么是Astro

Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架。了解为什么 Astro 可能是你下一个网站的好选择。

Astro 是最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架。Astro 以开创了一种新的前端架构而闻名,与其他框架相比它减少了 JavaScript 的开销和复杂性。如果你需要一个加载速度快、具有良好 SEO 的网站,那么 Astro 就是你的选择。

功能

Astro 是一个集多功能于一体的 Web 框架。它内置包含了你构建网站所需的一切。还有数百个不同的集成和 API 钩子可根据你的具体用例和需求定制你的项目。

一些亮点包括:

• 群岛 :一种基于组件的针对内容驱动的网站进行优化的 Web 架构。
• UI 无关 :支持 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 组件等等。
• 服务器优先 :将沉重的渲染移出访问者的设备。
• 默认无 JS :让客户端更少的执行 JS ,以提升网站速度。
• 内容集合 :为你的 Markdown 内容,提供组织、校验并保证 TypeScript 类型安全。
• 可定制 :Tailwind、MDX 和数百个集成可供选择。

设计原则

以下的五个核心设计原则有助于解释我们为什么做了 Astro,它需要解决的问题以及为什么 Astro 可能是你的项目或团队的最佳选择。

Astro 是...

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

内容驱动

Astro 专为构建内容丰富的网站而设计。这包括大多数营销网站、出版网站、文档网站、博客、个人作品集、着陆页、社区网站和电子商务网站。如果你有内容要展示,它需要快速地到达你的读者。

相比之下,大多数现代 Web 框架都是为构建 Web 应用程序而设计的。这些框架擅长于在浏览器中构建复杂的、类似应用程序的体验:登录后的管理仪表板、收件箱、社交网络、待办事项列表,甚至是像 Figma 和 Ping 这样的类原生应用程序。然而随着复杂性的增加,它们在提供内容时可能会遇到性能问题。

Astro 从它最初作为静态网站生成器的开始就专注于内容,使得 Astro 可以合理地扩展到性能强大的动态 Web 应用程序,同时仍然尊重你的内容和你的受众。Astro 对内容的独特关注让 Astro 能够做出取舍并提供无与伦比的在其他框架中实现起来不合理的性能功能。

服务器渲染

Astro 尽可能多地使用服务器渲染而不是在浏览器中的客户端渲染。这与传统的服务器端框架 — 像 PHP、WordPress、Laravel、Ruby on Rails 等 — 使用了几十年的方法相同。但你不需要学习第二种服务端语言来解锁它。使用 Astro,一切仍然只是 HTML、CSS 和 JavaScript(或 TypeScript,如果你乐意的话)。

这种方法与其他现代 JavaScript Web 框架形成鲜明对比,如 Next.js、SvelteKit、Nuxt、Remix 等。这些框架是为客户端渲染整个网站而制作的,提供服务器端渲染主要是为了解决性能问题。这种方法被称为单页应用程序(SPA),对比 Astro 的多页应用程序(MPA)。

SPA 模式有它的优势。然而,这些都是以牺牲额外的复杂性和性能权衡为代价的。这些取舍损害了页面性能 — 比如可交互时间(TTI)等关键指标 — 对于以内容为中心的网站没有多大意义,而这种网站的首次加载性能至关重要。

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

默认快速

好的性能总是重要的,但它对于那些成功取决于展示你的内容的网站来说尤其重要。事实已经充分证明糟糕的性能表现会让你失去参与度、转化率和金钱。例如:

• 每快 100ms → 转化率增加 1% (Mobify, 收入 +380,000ドル/年)
• 每快 50% → 销售额增加 12% (AutoAnything)
• 每快 20% → 转换率增加 10% (Furniture Village)
• 每快 40% → 注册率增加 15% (Pinterest)
• 每快 850ms → 转化率增加 7% (COOK)
• 每慢 1 秒 → 减少 10% 的用户 (BBC)

在许多 Web 框架中,很容易在开发过程中构建一个看起来很棒的网站,但在部署后加载速度非常慢。JavaScript 通常是罪魁祸首,因为用户的手机和低功耗设备很少能与开发者的电脑速度相匹配。

Astro 的魔力在于它如何将上述两个价值 — 以内容为中心和服务器优先的架构 — 相结合,做出权衡并提供其他框架无法实现的功能。结果是每个网站都开箱即有令人惊叹的 Web 性能。我们的目标:使用 Astro 几乎不可能做出缓慢的网站。

一个 Astro 网站可以比使用最受欢迎的 React Web 框架构建的同一网站加载速度快 40%,JavaScript 减少 90%。但不要直接相信我们的话:看 Astro 的性能让 Ryan Carniato(Solid.js 和 Marko 的创始人)说不出话来。

易于使用

Astro 的目标是使所有 Web 开发者都对它易于理解。Astro 被设计成熟悉和平易近人的感觉,无论技能水平或过去的 Web 开发经验如何。

Astro 的 .astro UI 语言是 HTML 的超集:任何有效的 HTML 都是有效的 Astro 模板语法!因此,如果你能编写 HTML,你就可以编写 Astro 组件!但是,它还结合了我们从其他组件语言中借用的一些我们最喜欢的功能,如 JSX 表达式(React)和默认使用 CSS 作用域(Svelte 和 Vue)。这种与 HTML 的相似性也使得使用渐进式增强和常见的可访问性模式变得更加容易而无额外开销。

我们然后确保你还可以使用你已经了解的最喜欢的 UI 组件语言,甚至可以复用你可能已经有的组件。React、Preact、Svelte、Vue、Solid、Lit 和其他的,包括 Web components,都被支持在 Astro 项目中编写 UI 组件。

Astro 的设计比其他 UI 框架和语言更简单。其中一个重要原因是 Astro 被设计为在服务器上渲染,不是在浏览器中。这意味着你无需担心:hooks (React)、stale closures (还是 React)、refs (Vue)、observables (Svelte)、atoms、selectors、reactions、或 derivations。服务器上没有响应式,因此这些复杂性都消失了。

我们最喜欢的说法之一是:复杂性是可选的。我们设计 Astro 是为了尽可能多地从开发者体验中消除"必须的复杂性",尤其是你首次加入时。你可以在 Astro 中只使用 HTML 和 CSS 构建一个"Hello World"示例网站。然后,当你需要构建更强大的东西时,你随时可以逐渐取用新功能和 API。

以开发者为中心

我们坚信,只有当人们喜欢使用 Astro 时,Astro 才是一个成功的项目。Astro 有支持你使用 Astro 构建网站所需的一切。

Astro 在开发者工具方面有所投入,例如从你打开终端的那一刻起就有的很棒的 CLI 体验、一个提供语法高亮的官方 VS Code 扩展、TypeScript 和 Intellisense,以及提供 14 种语言由数百名社区贡献者积极维护的文档。

我们友善、尊重和包容的 Discord 社区已准备好提供支持、动力和鼓励。创建一个 #support 帖子来获取关于你的项目的帮助。访问我们专门的 #showcase 频道,分享你的 Astro 网站、博客文章、视频、甚至是半成品以获得安全的反馈和建设性的批评。参加定期的实时活动,如我们每周的社区会议、"Talking and Doc’ing"、以及 API/bug 修复。

作为一个开源项目,我们欢迎各种经验程度的社区成员以各种类型和规模做出贡献。你被邀请参与路线图讨论以塑造 Astro 的未来,我们也希望你能为核心代码库、编译器、文档、语言工具、网站和其他项目贡献修复和功能。