Question

我已阅读 Next.js 文档，并且知道如何使用 getStaticProps 和 getStaticPaths。

我缺少的是它们实际上是如何协同工作的？我的意思是确切地调用 getStaticProps 时（在 [slug].js 文件中与 getStaticPaths 一起使用时）？

在我的分析中（我不确定），我认为 getStaticProps 是在 getStaticPaths 循环内部调用的“某种方式”，因此 getStaticPaths 为其“paths”变量中的每个对象运行 getStaticProps，对吗？< /p>

在此代码片段中查找我的评论：

export async function getStaticPaths() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // Get the paths we want to pre-render based on posts
  const paths = posts.map((post) => ({
    params: { id: post.id },
  }))
// getStaticProps is called somewhere in the previous loop???

  
  return { paths, fallback: false }
}

export async function getStaticProps({ params }) {
  // params contains the post `id`.
  // If the route is like /posts/1, then params.id is 1
  const res = await fetch(`https://.../posts/${params.id}`)
  const post = await res.json()

  // Pass post data to the page via props
  return { props: { post } }
}

export default Post

我还想确认另一个理解，getStaticPaths 是否通过为路径数组中的每个对象分配 params 键来修改上下文变量，因此当它调用 getStaticProps 时，参数将在上下文中更新（这两个函数都可以访问) 并准备好使用 getStaticProps 了吗？

我阅读了 Next.js 文档并观看了许多关于在 Next.js 中获取数据的视频，但仍然没有找到我问题的答案。

谢谢，塔哈

Answer 1

getStaticPaths 首先被调用。您返回一些选项和一组参数以输入 getStaticProps。

getStaticProps 然后为您从 getStaticPaths 返回的每组参数调用一次。这一步也是并行进行的，以加快构建速度。

getStaticPaths 和 getStaticProps 如何协同工作？

1 个答案: