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

30 阅读1分钟

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

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

4带数据和不带数据的静态生成

静态生成可以在有数据和没有数据的情况下完成。
到目前为止,我们创建的所有页面都不需要获取外部数据。当应用是为生产而构建时,这些页面将自动静态生成。
image.png
但是,对于某些页面,如果不先提取一些外部数据,则可能无法呈现 HTML。也许您需要在构建时访问文件系统、获取外部 API 或查询数据库。接下来.js支持这种情况 — 使用数据进行静态生成 — 开箱即用。
image.png

使用数据进行静态生成getStaticProps

它是如何工作的?好吧,在Next.js中,当您导出页面组件时,您还可以导出一个名为getStaticProps的async函数。如果这样做,则:

  • getStaticProps在生产环境中的构建时运行,并且...
  • 在函数内部,您可以获取外部数据并将其作为道具发送到页面。
export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

从本质上讲,getStaticProps允许你告诉Next.js:“嘿,这个页面_有一些数据依赖关系 - 所以当你在构建时预渲染这个页面时,请确保首先解决它们!_
注意:在开发模式下,getStaticProps 改为在每个请求上运行。

让我们使用getStaticProps

通过实践学习更容易,所以从下一篇开始,我们将使用 getStaticProps 来实现我们的博客。