渲染模式
你的 Astro 项目代码必须渲染为 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 模式¥Server output
modes
你可以配置页面在 output
配置 中的渲染方式。
¥You can configure how your pages are rendered in your output
configuration.
¥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
模式,用于跨页面导航的动画和状态持久性。静态站点还可以使用 中间件 来拦截和转换请求的响应数据。
¥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.
¥On-demand rendered
使用 SSR 适配器,可以配置 Astro 的另外两种输出模式以启用部分或全部页面、路由或 API 端点的按需渲染:
¥With an SSR adapter, 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'
适用于具有大多数或全部按需路由的高度动态站点。 -
output: 'hybrid'
适用于大多数静态站点以及一些按需路由。
由于它们是每次访问生成的,因此可以为每个观看者自定义这些路由。例如,按需渲染的页面可以向登录用户显示其账户信息或显示最新更新的数据,而无需重建整个站点。在请求时在服务器上按需渲染也称为服务器端渲染 (SSR)。
¥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 群岛 以实现交互性(甚至整个嵌入式客户端渲染应用!)。借助 中间件 和 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.