SSG Problem
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.
ISR in details
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
Nuxt Vercel
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!