Skip to content
Astro Astro

渲染模式

你的 Astro 项目代码必须是 rendered 到 HTML 才能在网络上显示。

英Your Astro project code must be rendered to HTML in order to be displayed on the web.

当请求路由时，Astro 页面、路由和 API 端点可以是 在构建时预渲染 或 由服务器按需渲染。 使用 Astro 群岛，你还可以在必要时包含一些客户端渲染。

英Astro pages, routes, and API endpoints can be either pre-rendered at build time or rendered on demand by a server when a route is requested. With Astro islands, you can also include some client-side rendering when necessary.

在 Astro 中，大部分处理发生在服务器上，而不是在浏览器中。 当在功能较弱的设备或较慢的互联网连接上查看时，这通常会使你的网站或应用比客户端渲染更快。 服务器渲染的 HTML 速度快、SEO 友好且默认可访问。

英In Astro, most of the processing occurs on the server, instead of in the browser. This generally makes your site or app faster than client-side rendering when viewed on less-powerful devices or on slower internet connections. Server-rendered HTML is fast, SEO friendly, and accessible by default.

服务器 output 模式

Section titled 服务器 output 模式

你可以配置页面在 output 配置 中的渲染方式。

英You can configure how your pages are rendered in your output configuration.

Pre-rendered

Section titled Pre-rendered

默认渲染模式为 output: 'static'，它在构建时为所有页面路由创建 HTML。

英The default rendering mode is output: 'static', which creates the HTML for all your page routes at build time.

在这种模式下，你的整个网站将被预渲染 和服务器将提前构建所有页面并准备发送到浏览器。 相同的 HTML 文档会发送到每个访问者的浏览器，并且需要重建整个站点来更新页面内容。 该方法也称为 静态站点生成（SSG）。

英In this mode, your entire site will be pre-rendered and the server will have all pages built ahead of time and ready to send to the browser. The same HTML document is sent to the browser for every visitor, and a full-site rebuild is required to update the contents of the page. This method is also known as static site generation (SSG).

默认情况下，所有 Astro 项目都配置为在构建时预渲染（静态生成），以提供最轻量级的浏览器体验。 浏览器不需要等待任何 HTML 构建，因为服务器不需要按需生成任何页面。 你的网站不依赖于后端数据源的性能，并且一旦构建，只要你的服务器正常运行，就可以作为静态网站供访问者使用。

英By default, all Astro projects are configured to be pre-rendered at build time (statically-generated) to provide the most lightweight browser experience. The browser does not need to wait for any HTML to build because the server does not need to generate any pages on demand. Your site is not dependent on the performance of a backend data source, and once built, will remain available to visitors as a static site as long as your server is functioning.

静态站点可以包括用于交互式 UI 组件（甚至整个嵌入式客户端渲染应用！）的 Astro 群岛，这些组件是在静态的预渲染页面中以 你选择的 UI 框架 编写的。

英Static sites can include Astro islands for interactive UI components (or even entire embedded client-side rendered apps!) written in the UI framework of your choice in an otherwise static, pre-rendered page.

Astro 的 视图转换 API 还提供 static 模式，用于跨页面导航的动画和状态持久性。 静态站点还可以使用 middleware 来拦截和转换请求的响应数据。

英Astro’s View Transitions API are also available in static mode for animation and state persistence across page navigation. Static sites can also use middleware to intercept and transform response data from a request.

:::tip 提示 Astro 的默认 static 模式对于更新不频繁、向所有访问者显示相同页面内容的内容丰富的网站来说是一种功能强大、现代感的选择。 :::

按需渲染

Section titled 按需渲染

Astro 的另外两种输出模式可以配置为启用 按需渲染部分或全部页面、路由或 API 端点：

  • output: 'server' 适用于具有大多数或全部按需路由的高度动态站点。
  • output: 'hybrid' 适用于大多数静态站点以及一些按需路由。

由于它们是每次访问生成的，因此可以为每个观看者自定义这些路线。 例如，按需渲染的页面可以向登录用户显示其账户信息或显示最新更新的数据，而无需重建整个站点。 在请求时在服务器上按需渲染也称为 服务器端渲染（SSR）。

英Astro’s other two output modes can be configured to enable on-demand rendering of some or all of your pages, routes or API endpoints:

  • output: 'server' for highly dynamic sites with most or all on-demand routes.
  • output: 'hybrid' for mostly static sites with some on-demand routes.

Since they are generated per visit, these routes can be customized for each viewer. For example, a page rendered on demand can show a logged-in user their account information or display freshly updated data without requiring a full-site rebuild. On-demand rendering on the server at request time is also known as server-side rendering (SSR).

如果你需要以下内容，请在你的 Astro 项目中添加 考虑启用 server 或 hybrid 模式：

英Consider enabling server or hybrid mode in your Astro project if you need the following:

  • API 端点： 创建用作数据库访问、身份验证和授权等任务的 API 端点的特定页面，同时对客户端隐藏敏感数据。

  • 受保护的页面： 通过处理服务器上的用户访问，根据用户权限限制对页面的访问。

  • 经常更改内容： 生成单独的页面，无需静态重建你的网站。 当页面内容频繁更新时（例如显示来自使用 fetch() 动态调用的 API 的数据），这非常有用。

server 和 hybrid 输出模式都允许你在选择的 用户界面框架 中包含 Astro 群岛 以实现交互性（甚至整个嵌入式客户端渲染应用！）。 借助 middleware 和 Astro 的 视图转换 API 用于动画并在路线导航中保留状态，甚至可以实现高度交互的应用。

英Both server and hybrid output modes allow you to include Astro islands for interactivity (or even entire embedded client-side rendered apps!) in your choice of UI frameworks. With middleware and Astro’s View Transitions API for animations and preserving state across route navigations, even highly interactive apps are possible.

:::tip 提示 Astro 中的按需服务器渲染提供了真正的应用体验，而无需客户端单页应用的 JavaScript 开销。 :::