静态预渲染最流行的查询与NextJS

Question

我使用NextJS预渲染页面的格式为:

./pages/folder/[variable].js

对于[variable]，我有一组大约8000个可能的值，因此静态地生成所有8000个页面实际上是不可行的。因此，我使用getSeverSideProps()每当加载此页面时。如下所示:

export async function getServerSideProps(context) {
const { variable } = context.params
const { res } = context;
// Caches response for 15 minutes on the server side
res.setHeader('Cache-Control', `s-maxage=900, stale-while-revalidate`)
const { data } = await axios.get(url + variable);
return { props : {data} }
}

尽管有超过8000个值，但前50个值包含了约90%的查询。

是否有任何方法可以静态地预渲染这50个值，如getStaticPaths()和getStaticProps ()，这样这50个查询的加载速度就会更快?

其次，最常见的请求列表随着时间的推移会发生轻微的变化，这一点不太值得关注。如果有一个解决方案可以动态地确定这50个值的列表，那将是理想的(尽管不是严格必要的)。

Answer 1

这正是Nextjs中增量静态再生的概念:

Next.js允许您在构建站点后创建或更新静态页面。增量静态再生(ISR)使您能够在每个页面的基础上使用静态生成，而无需重新构建整个站点。使用ISR，您可以在扩展到数百万页时保留静态的优点。

，下面是它的工作原理:

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// the path has not been generated.
export async function getStaticPaths() {
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 },
}))
// We'll pre-render only these paths at build time.
// { fallback: blocking } will server-render pages
// on-demand if the path doesn't exist.
return { paths, fallback: 'blocking' }
}

不要忘记，您仍然需要在您的页面上定义getStaticProps函数。

这里是关于增量静态再生的官方文档