为什么NextJS中的ApoloGraphQL示例使用getStaticProps而不使用getServerSidePr

Question

我很难理解为什么nextjs repo中的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,
}
}

Answer 1

来自文档：

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

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

对于revalidate:

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