两种预渲染形式

Next.js 提供两种预渲染形式：静态生成 (Static Generation) 和 服务端渲染 (Server-side Rendering)。两者的区别在于 生成 HTML 页面的时机。

• 静态生成 (Static Generation) 是在 构建时 生成 HTML 的预渲染方式。预渲染的 HTML 会在每次请求时被 复用。
• 服务端渲染 (Server-side Rendering) 是在 每次请求时 生成 HTML 的预渲染方式。

在开发模式下（运行 npm run dev 或 yarn dev 时），所有页面都会在每次请求时进行预渲染。这同样适用于静态生成，以便于开发。在生产环境中，静态生成只会在构建时执行一次，而 不会 在每次请求时执行。

按页面选择

重要的是，Next.js 允许你为每个页面 自由选择 预渲染方式。你可以构建一个"混合型" Next.js 应用：对大多数页面使用静态生成，对特定页面使用服务端渲染。

何时使用 静态生成 与 服务端渲染

我们推荐尽可能使用静态生成（无论是否获取数据），因为页面只需构建一次即可由 CDN 分发，这比每次请求都让服务器渲染页面要快得多。

静态生成适用于多种页面类型，包括：

• 营销页面
• 博客文章
• 电商产品列表
• 帮助文档

你可以自问："能否在用户请求 之前 预渲染此页面？"如果答案是肯定的，就应该选择静态生成。

反之，如果无法在用户请求前预渲染页面（例如页面需要显示频繁更新的数据，内容随每次请求变化），则静态生成 不适用。

这种情况下，可以使用服务端渲染。虽然速度较慢，但预渲染的页面总能保持最新状态。或者也可以跳过预渲染，使用客户端 JavaScript 来填充频繁更新的数据。

我们将重点介绍静态生成

本章节将重点讲解静态生成。在下一页中，我们会讨论 带数据 和 不带数据 的静态生成方式。