这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天
参考教程Pre-rendering and Data Fetching | Learn Next.js (nextjs.org)
预渲染和数据获取
0设置
我们想创建一个博客（这是所需的结果），但到目前为止，我们还没有添加任何博客内容。 在本课中，我们将学习如何将外部博客数据提取到我们的应用程序中。我们将博客内容存储在文件系统中，但如果内容存储在其他地方（例如数据库或无头CMS），它将起作用。
您将在本课中学到什么
在本课程中，您将了解：
- 接下来.js的预渲染功能。
- 预渲染的两种形式：静态生成和服务器端渲染。
- 有数据和没有数据的静态生成。
- getStaticProps 以及如何使用它将外部博客数据导入索引页。
- 关于getStaticProps的一些有用信息。
1下载入门代码（可选）
如果您没有继续上一课，您可以下载、安装和运行下面本课程的起始代码。这将设置一个目录，使其与上一课的结果相同。nextjs-blog
同样，如果您刚刚完成上一课，则没有必要这样做。
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/data-fetching-starter"
然后按照命令输出中的说明进行操作（进入目录并启动开发服务器）。cd
您还应该更新以下文件：
- public/images/profile.jpg与您的照片（建议：宽度/高度为 400 像素）。
- const name = '[Your Name]'用你的名字。components/layout.js
- [Your Self Introduction]在你的自我介绍中。pages/index.js 参考教程
预渲染和数据获取
0设置
我们想创建一个博客（这是所需的结果），但到目前为止，我们还没有添加任何博客内容。 在本课中，我们将学习如何将外部博客数据提取到我们的应用程序中。我们将博客内容存储在文件系统中，但如果内容存储在其他地方（例如数据库或无头CMS），它将起作用。
您将在本课中学到什么
在本课程中，您将了解：
- 接下来.js的预渲染功能。
- 预渲染的两种形式：静态生成和服务器端渲染。
- 有数据和没有数据的静态生成。
- getStaticProps 以及如何使用它将外部博客数据导入索引页。
- 关于getStaticProps的一些有用信息。
1下载入门代码（可选）
如果您没有继续上一课，您可以下载、安装和运行下面本课程的起始代码。这将设置一个目录，使其与上一课的结果相同。nextjs-blog
同样，如果您刚刚完成上一课，则没有必要这样做。
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/data-fetching-starter"
然后按照命令输出中的说明进行操作（进入目录并启动开发服务器）。cd
您还应该更新以下文件：
- public/images/profile.jpg与您的照片（建议：宽度/高度为 400 像素）。
- const name = '[Your Name]'用你的名字。components/layout.js
-
[Your Self Introduction]
在你的自我介绍中。pages/index.js
2预渲染
在讨论数据获取之前，让我们先谈谈 Next.js 中最重要的概念之一：预渲染。
默认情况下，Next.js 预呈现每个页面。这意味着Next.js提前_为每个页面生成HTML_，而不是由客户端JavaScript完成所有工作。预渲染可以带来更好的性能和 SEO。
每个生成的 HTML 都与该页面所需的最少 JavaScript 代码相关联。当浏览器加载页面时，其 JavaScript 代码会运行并使页面完全交互。（这个过程称为水合作用。
检查是否正在进行预渲染
您可以通过执行以下步骤来检查预渲染是否正在进行：
- 在浏览器中禁用 JavaScript。（这是在Chrome中的方式）。
- 尝试访问此页面（本教程的最终结果）。
您应该看到您的应用程序在没有 JavaScript 的情况下呈现。这是因为 Next.js 已将应用程序预呈现为静态 HTML，允许您在不运行 JavaScript 的情况下查看应用程序 UI。
注意：您也可以在 上尝试上述步骤，但如果禁用 JavaScript，则不会加载 CSS。localhost
如果你的应用是普通的 React.js 应用（没有 Next.js），则没有预渲染，因此如果禁用 JavaScript，您将无法看到该应用。例如：
- 在浏览器中启用 JavaScript 并查看此页面。这是一个使用Create React App构建的普通React.js应用程序。
- 现在，禁用JavaScript并再次访问同一页面。
- 你不会再看到这个应用程序了——相反，它会说“你需要启用JavaScript才能运行这个应用程序。这是因为应用未预呈现为静态 HTML。
摘要：预渲染与无预渲染
下面是一个快速的图形摘要：
之后，让我们再谈谈 Next.js 中的两种预渲染形式。
