如何在 Next.js 中为带有后备的静态路由启用 ISR？

Question

我知道启用带有回退的 ISR 需要在页面中导出 getStaticPaths：

export const getStaticPaths = () => {
  return {
    paths: []
  , fallback: 'blocking'
  }
}

但是getStaticPaths只适用于动态路由，比如[slug].jsx。

我想为静态路由启用 ISR 并使用 index.jsx 之类的回退，这不可能吗？

附加信息：我无法在构建时预先生成页面。

Answer 1

fallback key 在getStaticPaths 中用于控制如何为动态路由处理未在构建时生成的新路径。它可以返回一个404 页面（fallback: false），或者允许 Next.js 生成新页面（fallback: blocking 或fallback: true）。

鉴于您的 index.jsx 不是动态路由，这不适用，并且不需要后备，因为该页面将始终在构建时预先生成。

---

另一方面，Incremental Static Regeneration 允许您重新生成现有页面。它通过getStaticProps 中的revalidate 属性启用，可用于动态和非动态路由。

// index.jsx

export async function getStaticProps() {

    return {
        props: {
            //...
        }
        revalidate: 10 // Enables page regeneration
    }
}

当向index.jsx 发出请求时，它最初会显示缓存的预生成页面。

来自文档：

• 在初始请求之后和 10 秒之前对页面的任何请求也会被缓存并且是瞬时的。
• 在 10 秒窗口之后，下一个请求仍将显示缓存（陈旧）页面。
• Next.js 在后台触发页面的重新生成。
• 成功生成页面后，Next.js 将使缓存失效并显示更新后的产品页面。如果 后台重新生成失败，旧页面将保持不变。