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

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

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

逐页基础

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

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

我们建议尽可能使用静态生成（无论是否包含数据），因为你的页面可以构建一次并由 CDN 提供服务，这比每次请求都让服务器渲染页面要快得多。

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

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

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

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

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

我们将专注于静态生成

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