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

Question

I'm having trouble understanding why the Apollo GraphQL example in the nextjs repo using getStaticProps. The NextJS docs say getStaticProps is for getting data at build time.

Example is here: https://github.com/vercel/next.js/tree/canary/examples/with-apollo

In the implementation (shown below), it is retrieving data at runtime and not build time.

I'm also not understanding what revalidate: 1 does as it's not used anywhere in the example, but when changing the example to use getServerSideProps, it is not a valid parameter to pass in.

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

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

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

Answer 1

From the doc :

If you export an async function called getStaticProps from a page, Next.js will pre-render this page at build time using the props returned by getStaticProps .

The page is prerendered with the return value of the method at build time. So the query is executed at build time and apolloClient.cache.extract() will be used for a prerender.

For revalidate :

revalidate - An optional amount in seconds after which a page re-generation can occur. More on Incremental Static Regeneration