Next.js (4) | 青训营笔记

32 阅读4分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 12 天

参考教程Pre-rendering and Data Fetching | Learn Next.js (nextjs.org)

预渲染和数据获取

0设置

我们想创建一个博客(这是所需的结果),但到目前为止,我们还没有添加任何博客内容。 在本课中,我们将学习如何将外部博客数据提取到我们的应用程序中。我们将博客内容存储在文件系统中,但如果内容存储在其他地方(例如数据库或无头CMS),它将起作用。

您将在本课中学到什么

在本课程中,您将了解:

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),它将起作用。

您将在本课中学到什么

在本课程中,您将了解:

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 代码会运行并使页面完全交互。(这个过程称为水合作用

检查是否正在进行预渲染

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

  1. 在浏览器中禁用 JavaScript。(这是在Chrome中的方式)。
  2. 尝试访问此页面(本教程的最终结果)。

您应该看到您的应用程序在没有 JavaScript 的情况下呈现。这是因为 Next.js 已将应用程序预呈现为静态 HTML,允许您在不运行 JavaScript 的情况下查看应用程序 UI。
注意:您也可以在 上尝试上述步骤,但如果禁用 JavaScript,则不会加载 CSS。localhost
如果你的应用是普通的 React.js 应用(没有 Next.js),则没有预渲染,因此如果禁用 JavaScript,您将无法看到该应用。例如:

  • 在浏览器中启用 JavaScript 并查看此页面。这是一个使用Create React App构建的普通React.js应用程序。
  • 现在,禁用JavaScript并再次访问同一页面
  • 你不会再看到这个应用程序了——相反,它会说“你需要启用JavaScript才能运行这个应用程序。这是因为应用未预呈现为静态 HTML。

摘要:预渲染与无预渲染

下面是一个快速的图形摘要:
image.png
image.png
之后,让我们再谈谈 Next.js 中的两种预渲染形式