如何在不使用 +150k 静态页面重建应用的情况下添加新页面？

Posted 2023-03-06

【中文标题】如何在不使用 +150k 静态页面重建应用的情况下添加新页面？

【英文标题】：How to add new pages without rebuilding an app with +150k static pages?

【发布时间】：2021-05-08 05:14:14

【问题描述】：

我有一个集成了 NextJS 的 MERN 应用程序。第一次使用 NextJS，所以请多多包涵。我最初在任何地方都使用过 s-s-r (getServerSideProps)。

关键点：

我有超过 150,000 个页面的静态内容永远不会改变。 每周我都会添加大约 100 个新页面。

我想这里的理想情况是使用 getStaticProps 和 getStaticPaths 并且在初始构建这 150k 页面之后，只需每周构建新添加的页面并保持我已经构建的内容，因为它是永远不会改变。

我怎样才能做到这一点？我应该在这里使用revalidate 吗？我一直在文档中阅读它，但我并不完全理解它。

【参考方案1】：

这可以通过getStaticProps/getStaticPaths 来实现。您必须在getStaticPaths 中使用fallback: true or fallback: 'blocking'。

使用fallback: true，在构建时未生成的路径将在第一个请求时提供后备页面，而 Next.js 静态生成页面。完成此操作后，页面将从后备页面交换到实际的完整页面。

使用fallback: 'blocking'，在构建时未生成的路径将等待 Next.js 生成 html，然后在完成后提供页面。与fallback: true 不同，由于没有回退，因此在生成页面之前渲染会被阻塞，类似于服务器端渲染期间发生的情况。

在这两种情况下，页面都会添加到预渲染页面列表中。对同一路径的后续请求将服务于预先生成的页面。

next export 不支持这些选项，以防您依赖它。

---

注意revalidate 用于getStaticProps 中的Incremental Static Regeneration - 如果您想更新现有的生成页面。既然你提到生成的页面永远不会改变，那么就没有必要使用revalidate。

【讨论】：

谢谢！我误导了重新验证的后备。我将仅在列出这 150k 个静态页面的页面中使用 getStaticProps + revalidate，因为列表每周都会更改。

@juliomalves 在用户创建/更改其数据的 SSG 用户个人资料页面场景中会怎样。是否可以手动预生成他们的个人资料页面，以便无需后备？

@radulle "pregenerate their profile pages manualy" - 你是什么意思？使用 SSG，如果要添加在构建时未预先生成的新页面，则必须使用 fallback（true 或 'blocking'）。

@juliomalves 我措辞错误。阻止回退是可以的，但我真正想要的不是通过设置的计时器而是在某些事件（例如数据库更新或 api 调用）上重新验证。这样，当用户创建/修改他们的个人资料时，会生成新的静态页面，而旧的页面会失效。

Next.js ISR 目前还不支持。请参阅此相关问题：Next.js Static Regeneration on demand。