为啥 NextJS 中的 ApolloGraphQL 示例使用 getStaticProps 而不是 getServerSideProps

Posted 2023-03-10

【中文标题】为啥 NextJS 中的 ApolloGraphQL 示例使用 getStaticProps 而不是 getServerSideProps

【英文标题】：Why Does The ApolloGraphQL example in NextJS use getStaticProps and not getServerSideProps为什么 NextJS 中的 ApolloGraphQL 示例使用 getStaticProps 而不是 getServerSideProps

【发布时间】：2021-02-26 06:17:10

【问题描述】：

我无法理解为什么 nextjs 存储库中的 Apollo GraphQL 示例使用 getStaticProps。 NextJS 文档说 getStaticProps 用于在构建时获取数据。

示例在这里：https://github.com/vercel/next.js/tree/canary/examples/with-apollo

在实现中（如下所示），它是在运行时而不是构建时检索数据。

我也不明白revalidate: 1 做了什么，因为它在示例中的任何地方都没有使用，但是当将示例更改为使用 getServerSideProps 时，它不是传入的有效参数。

export async function getStaticProps() 
  const apolloClient = initializeApollo()

  await apolloClient.query(
    query: ALL_POSTS_QUERY,
    variables: allPostsQueryVars,
  )

  return 
    props: 
      initialApolloState: apolloClient.cache.extract(),
    ,
    revalidate: 1,
  

【参考方案1】：

来自doc：

如果您从页面导出名为 getStaticProps 的异步函数，Next.js 将在构建时使用 getStaticProps 返回的道具预渲染此页面。

页面在构建时使用方法的返回值进行预渲染。因此查询在构建时执行，apolloClient.cache.extract() 将用于预渲染。

对于revalidate：

revalidate - 以秒为单位的可选数量，之后可以重新生成页面。更多关于增量静态再生

【讨论】：

我确实按预期工作，但是 apolloClient.extract() 正在提取我在运行时生成的数据，所以我仍然不理解@scrimau

revalidate 启用incremental static regeneration。