预渲染的两种形式

Next.js 有两种预渲染形式：静态生成 和 服务器端渲染。区别在于它 **何时** 为页面生成 HTML。

• 静态生成 是一种在 **构建时** 生成 HTML 的预渲染方法。然后在每次请求时都重复使用预渲染的 HTML。
• 服务器端渲染 是一种在 **每次请求时** 生成 HTML 的预渲染方法。

在开发模式下（当你运行 npm run dev 或 yarn dev 时），页面会在每次请求时进行 预渲染。这也适用于 静态生成 以便于开发。当进入生产环境时，静态生成将在构建时发生一次，并且 **不会** 在每次请求时发生。

按页面为基础

重要的是，Next.js 允许你为每个页面**选择**要使用的预渲染形式。你可以创建一个“混合”的 Next.js 应用，对大多数页面使用 静态生成，而对其他页面使用 服务器端渲染。

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

我们建议尽可能使用 静态生成（带数据和不带数据），因为你的页面可以构建一次并由 CDN 提供服务，这比在每次请求时都由服务器渲染页面快得多。

你可以对许多类型的页面使用 静态生成，包括

• 营销页面
• 博文
• 电子商务产品列表
• 帮助和文档

你应该问问自己：“我能否在用户请求**之前**预渲染此页面？”如果答案是肯定的，那么你应该选择 静态生成。

另一方面，如果你无法在用户请求之前预渲染页面，则 静态生成 **不是**一个好主意。也许你的页面显示频繁更新的数据，并且页面内容在每次请求时都会发生变化。

在这种情况下，你可以使用 服务器端渲染。它会比较慢，但预渲染的页面将始终是最新的。或者你可以跳过预渲染，并使用客户端 JavaScript 来填充频繁更新的数据。

我们将重点关注静态生成

在本课中，我们将重点介绍 静态生成。在下一页，我们将讨论 静态生成 **带数据和不带数据**。