使用 NextJS 静态预呈现最流行的查询

Question

我正在使用 NextJS 预呈现格式的页面：

./pages/folder/[variable].js

我有一组约 8000 个可能的 [variable] 值，因此静态生成所有 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% 的查询。

有什么方法可以使用 getStaticPaths() 和 getStaticProps() 之类的方法静态预渲染这 50 个值，这样这些特定的 50 个查询加载速度更快？

其次，但不太令人担忧的是，最常见请求的列表随时间略有变化。如果有一个解决方案可以动态确定这个包含 50 个值的列表，那将是理想的（尽管不是绝对必要的）。

Answer 1

这正是Nextjs中Incremental Static Regeneration的概念：

Next.js allows you to create or update static pages after you’ve built your site. Incremental Static Regeneration (ISR) enables you to use static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages.

这是它的工作原理：

// 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 功能。

这是关于Incremental Static Regeneration

的官方文档

使用 NextJS 静态预呈现最流行的查询

Statically pre-render most popular queries with NextJS

javascript

reactjs

server-side-rendering

next.js