为什么选择 Astro？

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

¥Astro is the web framework for building content-driven websites like blogs, marketing, and e-commerce. Astro is best-known for pioneering a new frontend architecture to reduce JavaScript overhead and complexity compared to other frameworks. If you need a website that loads fast and has great SEO, then Astro is for you.

特性

¥Features

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

¥Astro is an all-in-one web framework. It includes everything you need to create a website, built-in. There are also hundreds of different integrations and API hooks available to customize a project to your exact use case and needs.

一些亮点包括：

¥Some highlights include:

群岛：针对内容驱动网站进行优化的基于组件的 Web 架构。
UI 无关：支持 React、Preact、Svelte、Vue、Solid、HTMX、Web 组件等。
服务器优先：将昂贵的渲染从访问者的设备上移走。
默认情况下，零 JS：更少的客户端 JavaScript 会降低网站速度。
内容集合：为你的 Markdown 内容组织、验证并提供 TypeScript 类型安全。
可定制：Tailwind、MDX 以及数百种集成可供选择。

设计原则

¥Design Principles

以下五个核心设计原则可帮助解释我们构建 Astro 的原因、它要解决的问题以及为什么 Astro 可能是你的项目或团队的最佳选择。

¥Here are five core design principles to help explain why we built Astro, the problems that it exists to solve, and why Astro may be the best choice for your project or team.

Astro 是…

¥Astro is…

内容驱动：Astro 旨在展示你的内容。
服务器优先：当网站在服务器上渲染 HTML 时，其运行速度会更快。
默认情况下很快：在 Astro 中建立一个缓慢的网站应该是不可能的。
便于使用：你无需成为专家即可使用 Astro 构建某些东西。
以开发者为中心：你应该拥有成功所需的资源。

内容驱动

¥Content-driven

Astro 专为构建内容丰富的网站而设计。这包括营销网站、发布网站、文档网站、博客、档案、登陆页面、社区网站和电子商务网站。如果你有内容要展示，它需要快速到达你的读者。

¥Astro was designed for building content-rich websites. This includes marketing sites, publishing sites, documentation sites, blogs, portfolios, landing pages, community sites, and e-commerce sites. If you have content to show, it needs to reach your reader quickly.

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

¥By contrast, most modern web frameworks were designed for building web applications. These frameworks excel at building more complex, application-like experiences in the browser: logged-in admin dashboards, inboxes, social networks, todo lists, and even native-like applications like Figma and Ping. However with that complexity, they can struggle to provide great performance when delivering your content.

Astro 从一开始就专注于内容，作为静态网站构建器，这使得 Astro 能够明智地扩展到高性能、强大、动态的 Web 应用，同时仍然尊重你的内容和受众。Astro 对内容的独特关注让 Astro 能够做出权衡并提供无与伦比的性能功能，而这些功能对于更多以应用为中心的 Web 框架的实现来说是没有意义的。

¥Astro’s focus on content from its beginnings as a static site builder have allowed Astro to sensibly scale up to performant, powerful, dynamic web applications that still respect your content and your audience. Astro’s unique focus on content lets Astro make tradeoffs and deliver unmatched performance features that wouldn’t make sense for more application-focused web frameworks to implement.

服务器优先

¥Server-first

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

¥Astro leverages server rendering over client-side rendering in the browser as much as possible. This is the same approach that traditional server-side frameworks -- PHP, WordPress, Laravel, Ruby on Rails, etc. -- have been using for decades. But you don’t need to learn a second server-side language to unlock it. With Astro, everything is still just HTML, CSS, and JavaScript (or TypeScript, if you prefer).

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

¥This approach stands in contrast to other modern JavaScript web frameworks like Next.js, SvelteKit, Nuxt, Remix, and others. These frameworks were built for client-side rendering of your entire website and include server-side rendering mainly to address performance concerns. This approach has been dubbed the Single-Page App (SPA), in contrast with Astro’s Multi-Page App (MPA) approach.

SPA 模式有其优点。然而，这些是以额外的复杂性和性能权衡为代价的。这些权衡会损害页面性能（像互动时间 (TTI) 这样的关键指标），这对于首次加载性能至关重要的以内容为中心的网站来说没有多大意义。

¥The SPA model has its benefits. However, these come at the expense of additional complexity and performance tradeoffs. These tradeoffs harm page performance -- critical metrics like Time to Interactive (TTI) -- which doesn’t make much sense for content-focused websites where first-load performance is essential.

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

¥Astro’s server-first approach allows you to opt in to client-side rendering only if, and exactly as, necessary. You can choose to add UI framework components that run on the client. You can take advantage of Astro’s view transitions router for finer control over select page transitions and animations. Astro’s server-first rendering, either pre-rendered or on-demand, provides performant defaults that you can enhance and extend.

默认情况下很快

¥Fast by default

良好的性能始终很重要，但对于成功取决于内容展示的网站来说尤其重要。事实证明，糟糕的表现会导致你失去参与度、转化率和金钱。例如：

¥Good performance is always important, but it is especially critical for websites whose success depends on displaying your content. It has been well-proven that poor performance loses you engagement, conversions, and money. For example:

每快 100 毫秒 → 转化次数增加 1%（移动化，收入 + 380,000 美元/年）
速度提高 50% → 销售额增加 12% (AutoAnything)
速度提高 20% → 转化次数增加 10% (家具村)
速度提高 40% → 注册量增加 15% (兴趣)
速度提高 850 毫秒 → 转化次数增加 7% (COOK)
每慢 1 秒 → 用户减少 10% (BBC)

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

¥In many web frameworks, it is easy to build a website that looks great during development only to load painfully slow once deployed. JavaScript is often the culprit, since many phones and lower-powered devices rarely match the speed of a developer’s laptop.

Astro 的神奇之处在于它如何将上面解释的两个值结合起来 - 以内容为中心与服务器优先的架构 - 以进行权衡并提供其他框架无法提供的功能。结果是每个网站都具有惊人的开箱即用的网络性能。我们的目标：用 Astro 建立一个缓慢的网站几乎是不可能的。

¥Astro’s magic is in how it combines the two values explained above -- a content focus with a server-first architecture -- to make tradeoffs and deliver features that other frameworks cannot. The result is amazing web performance for every website, out of the box. Our goal: It should be nearly impossible to build a slow website with Astro.

Astro 网站比使用最流行的 React Web 框架构建的同一网站要好得多。但不要相信我们的话：观看 Astro 的表演离开 Ryan Carniato（Solid.js 和 Marko 的创建者）speechless。

¥An Astro website can load 40% faster with 90% less JavaScript than the same site built with the most popular React web framework. But don’t take our word for it: watch Astro’s performance leave Ryan Carniato (creator of Solid.js and Marko) speechless.

便于使用

¥Easy to use

Astro 的目标是让每个 Web 开发者都可以使用。Astro 的设计宗旨是让人感觉熟悉且平易近人，无论技能水平或过去的 Web 开发经验如何。

¥Astro’s goal is to be accessible to every web developer. Astro was designed to feel familiar and approachable regardless of skill level or past experience with web development.

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

¥The .astro UI language is a superset of HTML: any valid HTML is valid Astro templating syntax! So, if you can write HTML, you can write Astro components! But, it also combines some of our favorite features borrowed from other component languages like JSX expressions (React) and CSS scoping by default (Svelte and Vue). This closeness to HTML also makes it easier to use progressive enhancement and common accessibility patterns without any overhead.

然后，我们确保你还可以使用你最喜欢的、你已经了解的 UI 组件语言，甚至可以重用你可能已经拥有的组件。React、Preact、Svelte、Vue、Solid 和其他组件（包括 Web 组件）均支持在 Astro 项目中创作 UI 组件。

¥We then made sure that you could also use your favorite UI component languages that you already know, and even reuse components you might already have. React, Preact, Svelte, Vue, Solid, and others, including web components, are all supported for authoring UI components in an Astro project.

Astro 的设计比其他 UI 框架和语言简单。造成这种情况的一个重要原因是 Astro 被设计为在服务器上渲染，而不是在浏览器中渲染。这意味着你无需担心：钩子（React）、过时的闭包（也称为 React）、引用（Vue）、可观察量（Svelte）、原子、选择器、反应或派生。服务器上没有反应性，因此所有复杂性都消失了。

¥Astro was designed to be less complex than other UI frameworks and languages. One big reason for this is that Astro was designed to render on the server, not in the browser. That means that you don’t need to worry about: hooks (React), stale closures (also React), refs (Vue), observables (Svelte), atoms, selectors, reactions, or derivations. There is no reactivity on the server, so all of that complexity melts away.

我们最喜欢的一句话之一是：选择复杂性。我们设计 Astro 是为了尽可能地消除开发者体验中的 “所需的复杂性”，尤其是当你第一次使用时。你可以仅使用 HTML 和 CSS 在 Astro 中构建 “你好世界” 示例网站。然后，当你需要构建更强大的东西时，你可以逐步获取新功能和 API。

¥One of our favorite sayings is: opt in to complexity. We designed Astro to remove as much “required complexity” as possible from the developer experience, especially as you onboard for the first time. You can build a “Hello World” example website in Astro with just HTML and CSS. Then, when you need to build something more powerful, you can incrementally reach for new features and APIs as you go.

以开发者为中心

¥Developer-focused

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

¥We strongly believe that Astro is only a successful project if people love using it. Astro has everything you need to support you as you build with Astro.

Astro 投资于开发者工具，例如从你打开终端的那一刻起即可获得出色的 CLI 体验、用于语法高亮的官方 VS Code 扩展、TypeScript 和 Intellisense，以及由数百名社区贡献者积极维护并提供 14 种语言版本的文档。

¥Astro invests in developer tools like a great CLI experience from the moment you open your terminal, an official VS Code extension for syntax highlighting, TypeScript and Intellisense, and documentation actively maintained by hundreds of community contributors and available in 14 languages.

我们 Discord 上热情、尊重、包容的社区随时准备提供支持、动力和鼓励。打开 #support 线程来获取有关你的项目的帮助。访问我们专用的 #showcase 通道，分享你的 Astro 网站、博客文章、视频，甚至正在进行的工作，以获得安全反馈和建设性批评。参加定期的在线活动，例如我们的每周社区调用会议、“谈话和记录，” 和 API/bug bashes。

¥Our welcoming, respectful, inclusive community on Discord is ready to provide support, motivation, and encouragement. Open a #support thread to get help with your project. Visit our dedicated #showcase channel for sharing your Astro sites, blog posts, videos, and even work-in-progress for safe feedback and constructive criticism. Participate in regular live events such as our weekly community call, “Talking and Doc’ing,” and API/bug bashes.

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

¥As an open-source project, we welcome contributions of all types and sizes from community members of all experience levels. You are invited to join in roadmap discussions to shape the future of Astro, and we hope you’ll contribute fixes and features to the core codebase, compiler, docs, language tools, websites, and other projects.