nuxt

Incremental Static Regeneration in Nuxt

I've been waiting a long time for this feature. Here's what they say:


Various examples of setting route rules:

export default defineNuxtConfig({
  routeRules: {
    // all routes (by default) will be revalidated every 60 seconds, in the background
    '/**': { isr: 60 },
    // this page will be generated on demand and then cached permanently
    '/static': { isr: true },
    // this page is generated at build time and cached permanently
    '/prerendered': { prerender: true },
    // this page will be always fresh
    '/dynamic': { isr: false },
    // you can do lots more with route rules too!
    '/redirect': { redirect: '/static' },
    '/headers': { headers: { 'x-magic-of': 'nuxt and vercel' } },
    '/spa': { ssr: false },
  },
})


Now, the interesting part:

https://nitro.unjs.io/deploy/providers/vercel#on-demand-incremental-static-regeneration-isr


First you need a bypass token set in your app:

nitro.config.ts
export default defineNitroConfig({
  vercel: {
    config: { 
      bypassToken: process.env.VERCEL_BYPASS_TOKEN
    }
  }
})

# OR

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    vercel: {
      config: { 
        bypassToken: process.env.VERCEL_BYPASS_TOKEN
      }
    }
  }
})


Finally:

To trigger "On-Demand Incremental Static Regeneration (ISR)" and revalidate a path to a Prerender Function, make a GET or HEAD request to that path with a header of x-prerender-revalidate: . When that Prerender Function endpoint is accessed with this header set, the cache will be revalidated. The next request to that function should return a fresh response.


Frankly it's bizarre that this feature took so long to be implemented, it's by far the most important feature of all. Its absence is why I left Nuxt for next.js. But, it's here now.