getStaticPaths 和 getStaticProps 如何协同工作？

Question

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

我想念的是他们实际上是如何一起工作的？我的意思是 getStaticProps 何时被调用（当与 [slug].js 文件中的 getStaticPaths 一起使用时）？

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

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

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 是否通过为 paths 数组中的每个对象分配 params 键来修改上下文变量，因此当它调用 getStaticProps 时，参数将在上下文中更新（两个函数都可以访问）并准备好对于 getStaticProps？

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

谢谢，塔哈

Answer 1

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

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

关于“如果你有大量路径怎么办”：

如果您从 中返回一百万个值getStaticPaths，那么是的，getStaticProps将被调用一百万次。是的，这可能非常密集，这就是为什么您getStaticPaths也拥有fallback可以归还的财产。

这样，您就可以知道如果客户端请求尚未预渲染的路径，并且仅返回您确实想要预渲染的路径子集，会发生什么情况。例如，可以是您的前 100 篇博客文章、基于最新分析的前 1000 种产品，甚至是一个空列表（如果您不想预渲染任何内容）。

您的后备选项是fallback: true和fallback: 'blocking'。第一个结果是 Next 为您的页面后备页面router.isFallback设置为，true同时生成丢失的页面（因此您必须处理该问题，显示旋转器或其他内容）。第二个，这更容易，并且对用户来说更好，只要你的渲染不是非常慢（在我看来），只是意味着 Next 将阻止响应，直到渲染完成，然后正常返回页面。简而言之，意味着true您必须实现一个微调器（也许对超慢页面有用？），并且'blocking'意味着您不需要（我更喜欢的）。

请参阅https://nextjs.org/docs/api-reference/data-fetching/get-static-paths了解更多信息。