渲染

默认情况下,Next.js 会对每个页面进行预渲染。这意味着 Next.js 会提前为每个页面生成 HTML,而不是完全依赖客户端 JavaScript 来完成。预渲染可以带来更好的性能和 SEO 表现。

每个生成的 HTML 都关联着该页面所需的最少量 JavaScript 代码。当浏览器加载页面时,其 JavaScript 代码会运行并使页面完全可交互(在 React 中这个过程称为 hydration)。

预渲染

Next.js 有两种预渲染方式:静态生成 (Static Generation)服务端渲染 (Server-side Rendering)。两者的区别在于生成 HTML 页面的时机不同。

  • 静态生成:HTML 在构建时生成,并在每次请求时重复使用。
  • 服务端渲染:HTML 在每次请求时生成。

值得注意的是,Next.js 允许您为每个页面选择所需的预渲染方式。您可以通过对大多数页面使用静态生成,对其他页面使用服务端渲染,来创建一个"混合"型 Next.js 应用。

出于性能考虑,我们推荐优先使用静态生成而非服务端渲染。静态生成的页面可以被 CDN 缓存,无需额外配置即可提升性能。但在某些情况下,服务端渲染可能是唯一的选择。

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

On this page