预渲染
在讨论数据获取之前，我们需要先了解 Next.js 中最重要的概念之一：预渲染。
默认情况下，Next.js 会对每个页面进行预渲染。这意味着 Next.js 会_提前为每个页面生成 HTML_，而不是完全依赖客户端 JavaScript 来完成。预渲染可以带来更好的性能和搜索引擎优化 (SEO)。
每个生成的 HTML 都关联着该页面所需的最少 JavaScript 代码。当浏览器加载页面时，其 JavaScript 代码会运行并使页面完全交互。（这个过程称为水合 (hydration)。）
验证预渲染是否生效
您可以通过以下步骤验证预渲染是否生效：
- 在浏览器中禁用 JavaScript（Chrome 禁用方法）。
- 访问此页面（本教程的最终结果）。
您应该能看到应用在没有 JavaScript 的情况下仍然正常渲染。这是因为 Next.js 已将应用预渲染为静态 HTML，无需运行 JavaScript 即可显示应用界面。
注意：您也可以在
localhost上尝试上述步骤，但禁用 JavaScript 后 CSS 将不会加载。
如果您的应用是纯 React.js 应用（未使用 Next.js），则没有预渲染功能，禁用 JavaScript 后将无法看到应用。例如：
- 启用浏览器 JavaScript 并查看此页面。这是一个使用 Create React App 构建的纯 React.js 应用。
- 现在禁用 JavaScript 并再次访问同一页面。
- 您将看不到应用界面，而是显示“您需要启用 JavaScript 才能运行此应用”。这是因为应用没有被预渲染为静态 HTML。
总结：预渲染 vs 无预渲染
以下是快速图示总结：
接下来，我们将讨论 Next.js 中预渲染的两种形式。