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

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

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

按页面区分

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

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

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

您可以将静态生成用于多种类型的页面，包括

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

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

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

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

我们将专注于静态生成

在本课中，我们将专注于静态生成。在下一页，我们将讨论带数据和不带数据的静态生成。