Почему пример ApolloGraphQL в NextJS использует getStaticProps, а не getServerSideProps

#reactjs #next.js #vercel

#reactjs #next.js #vercel

Вопрос:

Мне трудно понять, почему пример Apollo GraphQL в репозитории nextjs использует 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:

Из документа:

Если вы экспортируете асинхронную функцию с именем getStaticProps со страницы, Next.js будет предварительно отображать эту страницу во время сборки, используя реквизиты, возвращаемые getStaticProps .

Страница предварительно отображается с возвращаемым значением метода во время сборки. Таким образом, запрос выполняется во время сборки и apolloClient.cache.extract() будет использоваться для предварительного запроса.

Для revalidate :

revalidate — Необязательное количество в секундах, после которого может произойти повторная генерация страницы. Подробнее об инкрементной статической регенерации

Комментарии:

1. Я действительно работаю так, как я ожидал, но ApolloClient.extract() извлекает данные, которые я сгенерировал над ним во время выполнения, поэтому я все еще не понимаю @scrimau

2. revalidate включает инкрементную статическую регенерацию .