Skip to main content

渲染

默认情况下，Next.js 预渲染每个页面。这意味着 Next.js 提前为每个页面生成 HTML，而不是由客户端 JavaScript 完成这一切。预渲染可以带来更好的性能和 SEO。

¥By default, Next.js pre-renders every page. This means that Next.js generates HTML for each page in advance, instead of having it all done by client-side JavaScript. Pre-rendering can result in better performance and SEO.

每个生成的 HTML 都与该页面所需的最少 JavaScript 代码相关联。当浏览器加载页面时，其 JavaScript 代码将运行并使页面完全交互（此过程在 React 中称为 hydration）。

¥Each generated HTML is associated with minimal JavaScript code necessary for that page. When a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive (this process is called hydration in React).

预渲染​

¥Pre-rendering

Next.js 有两种形式的预渲染：静态生成和服务器端渲染。不同之处在于它何时生成页面的 HTML。

¥Next.js has two forms of pre-rendering: Static Generation and Server-side Rendering. The difference is in when it generates the HTML for a page.

  • 静态生成：HTML 是在构建时生成的，并将在每个请求中重用。

    ¥Static Generation: The HTML is generated at build time and will be reused on each request.

  • 服务端渲染：HTML 是根据每个请求生成的。

    ¥Server-side Rendering: The HTML is generated on each request.

重要的是，Next.js 允许你选择要为每个页面使用哪种预渲染表单。你可以通过对大多数页面使用静态生成并对其他页面使用服务器端渲染来创建 "hybrid" Next.js 应用。

¥Importantly, Next.js lets you choose which pre-rendering form you'd like to use for each page. You can create a "hybrid" Next.js app by using Static Generation for most pages and using Server-side Rendering for others.

出于性能原因，我们建议使用静态生成而不是服务器端渲染。静态生成的页面可以由 CDN 缓存，无需额外配置即可提高性能。但是，在某些情况下，服务器端渲染可能是唯一的选择。

¥We recommend using Static Generation over Server-side Rendering for performance reasons. Statically generated pages can be cached by CDN with no extra configuration to boost performance. However, in some cases, Server-side Rendering might be the only option.

你还可以使用客户端数据获取以及静态生成或服务器端渲染。这意味着页面的某些部分可以完全由客户端 JavaScript 渲染。要了解更多信息，请查看 数据获取 文档。

¥You can also use client-side data fetching along with Static Generation or Server-side Rendering. That means some parts of a page can be rendered entirely by clientside JavaScript. To learn more, take a look at the Data Fetching documentation.