这是我参与「第五届青训营 」伴学笔记创作活动的第 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 中的两种预渲染形式。