预渲染

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

默认情况下，Next.js 会预渲染每个页面。这意味着 Next.js 预先生成每个页面的 HTML，而不是由客户端 JavaScript 完成所有操作。预渲染可以提高性能和SEO。

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

检查是否正在进行预渲染

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

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 中的两种形式的预渲染。