在讨论数据获取之前，我们先来谈谈 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。

总结：预渲染 vs. 无预渲染

这是一个快速的图形摘要

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