Next.js：如何在请求时构建页面并保存？

Question

我目前正在使用getStaticProps和getStaticPaths构建 static HTML文件，但问题是每次构建它都会构建大约 10k+ 页。 我不知道如何保存getServerSideProps's构建页面，根据文档，它说它是在请求时构建它，这是我想要的，但它没有提到像getStaticProps那样保存它的任何内容。

Answer 1

您不能将getStaticProps又名 SSR 页面“转”为 static 页面，但您可以通过缓存构建页面所需的 API 请求来实现几乎相同的效果/速度。

如果您在 Vercel 上托管，则可以执行以下操作：

res.setHeader("Cache-Control", "s-maxage=60, stale-while-revalidate=59")

从文档：

这告诉我们的 CDN 值是新鲜的一秒钟。 如果在下一秒内重复请求，则先前缓存的值仍然是新鲜的。 响应中存在的 header x-vercel-cache 将显示值 HIT。 如果请求在 1 到 60 秒后重复，则缓存的值将是陈旧的，但仍会呈现。 在后台，将发出重新验证请求以使用新值填充缓存。 x-vercel-cache 将具有值 STALE 直到刷新缓存。

如果您的内容从未更改，您可以删除stale-while-revalidate并将 s-max-age 设置得非常高，以便响应保持缓存直到您下一次重新部署：

export async function getServerSideProps({ res }) {
  res.setHeader('Cache-Control', 's-max-age=10000000000')
  return {
    props: {
    }
  };
}

来源： https://vercel.com/docs/concepts/edge-network/caching