• Home
  • Health
  • Software
  • Blog
  • 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.