Incremental Static Regeneration in Nuxt

When I first heard the term Incremental Static Regeneration I was instantly interested in exploring how it works and how I could utilize it in my applications.

After reading first paragraphs and watching some introductory videos, I thought to myself; Damn, another solution that works only for Static apps like blogs, what about e-commerce?

And then, I watched the video by @leerob about this topic where he was also showing how to utilize this concept in Next.js based E-Commerce application. And that was something that I really liked!

You can check out the video introduction below:

https://github.com/danielroe/nuxt-vercel-isr

https://vercel.com/blog/nuxt-on-vercel

In this article, I decided to write about how you can achieve the same result in my favourite framework -> Nuxt 💚

The problem

Sites generated statically (SSG's) are great for performance as they are just pure HTML send to the browser. This works great for small apps like blog websites, but for large and complex projects like e-commerce websites, the amount of pages that would need to be prerended is quite huge.

The bigger the number of pages = the longer build time. And for some companies this is a complete no-go.

The solution

Incremental Static Regeneration (ISR) allows content editors and developers to use static generation on a per-page basis and update content without having to rebuild the entire site.

It uses the concept of cache under the hood to cache the generated template and only rerender it when there is a need for that (for example a new content in CMS is added).

Take a look at the following graphic to understand better how this works.

How to use it in Nuxt?

For such article, I would normally create a demo project and repository but the great @danielroe himself already done that and you can check it out here

The demo application can also be seen here

You can also read more how to use Nuxt with Vercel here

But the general idea is to utilize the concept of routeRules that allows you to specify how your application should be rendered (read more about hybrid rendering here)

export default defineNuxtConfig({
  routeRules: {
    // all routes will be background revalidated (ISR) at most every 60 seconds
    '/**': { isr: 60 },
    // this page will be generated on demand and cached permanently
    '/static': { isr: true }
  },
});

The above implementation shows how to use ISR in Nuxt but you can also take it to another level and configure your app like following:

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 },
  },
})

You can clearly see how much control Nuxt gives you while building applications.

Summary

Nicely done! You understand now what are the issues of SSG apps, how you can solve them with ISR, how to achieve ISR in Nuxt and how you can customize the rendering of Nuxt to match your needs. That was a lot but this kind of knowledge is always really useful.

Take care!