在讨论数据获取之前，我们先来谈谈 Next.js 中最重要的概念之一：预渲染。

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

每个生成的 HTML 都与该页面所需的最小 JavaScript 代码相关联。当页面由浏览器加载时，其 JavaScript 代码运行并使页面完全交互。（这个过程称为水合（hydration）。）

检查预渲染是否正在进行

您可以按照以下步骤检查预渲染是否正在进行

1. 禁用浏览器中的 JavaScript。（以下是 Chrome 中的操作方法）。
2. 尝试访问此页面（本教程的最终结果）。

您应该会看到您的应用在没有 JavaScript 的情况下渲染。这是因为 Next.js 已将应用预渲染为静态 HTML，让您无需运行 JavaScript 即可查看应用 UI。

注意：您也可以在 localhost 上尝试上述步骤，但如果您禁用 JavaScript，CSS 将不会加载。

如果您的应用是纯 React.js 应用（没有 Next.js），则没有预渲染，因此如果您禁用 JavaScript，您将无法看到应用。例如

• 在浏览器中启用 JavaScript 并查看此页面。这是一个使用Create React App构建的纯 React.js 应用。
• 现在，禁用 JavaScript 并再次访问同一页面。
• 您将无法再看到应用——相反，它会显示“您需要启用 JavaScript 才能运行此应用。”这是因为应用未预渲染为静态 HTML。

总结：预渲染与不预渲染

以下是一个快速图形总结

接下来，我们来谈谈 Next.js 中预渲染的两种形式。