New Nuxt 3 Feature: Incremental Static Generation


Aside from a basic Single Page App (SPA) setup, there are other mainstream approaches to start a modern web project. They provide benefits such as SEO and website speed.

In this article, we’ll go through the pros and cons of Server Side Rendering (SSR), Static Site Generation (SSG), and a hybrid mode called Incremental Static Generation (ISG).

Screen Shot 2022-05-13 at 2.40.21 AM.png


Server Side Rendering (SSR)

First, let’s talk about SSR.

When a client makes a request to the server:

Screen Shot 2022-05-13 at 2.23.44 AM.png

SSR will render the page in real time on the server:

Screen Shot 2022-05-13 at 2.25.06 AM.png

Then the page gets sent back to the client:

Screen Shot 2022-05-13 at 2.24.28 AM.png

Because the page is rendered in real time, it will always be up to date.


Static Site Generation (SSG)

In contrast to SSR, SSG renders all the pages of your website at build time (that’s the time before your website gets deployed).

Screen Shot 2022-05-13 at 2.26.34 AM.png

When the client sends a request:

Screen Shot 2022-05-13 at 2.27.07 AM.png

There’s no rendering needed in real time, so it just needs to send back the right page:

Screen Shot 2022-05-13 at 2.28.31 AM.png

All the rendering got all taken care of at build time, so it’s faster in response speed.


SSR or SSG, which one to choose?

When we put the two approaches side by side:

Screen Shot 2022-05-13 at 2.30.07 AM.png

We can see that SSR is all about being up to date, and the SSG is all about being faster in response speed (and more flexible to find hosting services since it’s just a bunch of static files).

So depending on your use case, if your website data is always changing, and you need the contents to be always up to date, you should go with SSR. But if response speed and hosting flexibility are more important to you, you should consider using SSG.

Additionally, the build speed comes into play if you have a website with thousands of pages. SSG is slower at making a build because all the pages have to be rendered at build time.

As you can see, either approach has its weaknesses. What if you just need your website to be always up to date with fast response speed and build speed.

That’s exactly what Incremental Static Generation is for.


Incremental Static Generation (ISG)

ISG is a new hybrid approach coming soon to Nuxt 3. It could keep the response speed on the SSG level, while the pages are mostly up to date, closer to the SSR level.

The trick is to serve the cached version of a page in real time:

Screen Shot 2022-05-13 at 2.36.50 AM.png

And regenerate a new version of this page in the background:

Screen Shot 2022-05-13 at 2.38.00 AM.png

And serve the new version for the next request:

Screen Shot 2022-05-13 at 2.38.27 AM.png


Finally, let’s go through the ratings one by one:

Screen Shot 2022-05-13 at 2.43.23 AM.png

Because a cached version of the page is served immediately, the response speed is the same as serving a static file.

Screen Shot 2022-05-13 at 2.41.31 AM.png

You would be able to configure how often a page has to be regenerated. Although the pages are still not strictly up to date all the time, they’re practically up to date most of the time. (If your requirement is to have the pages to be absolutely up to date all the time, you should still go with SSR.)

Screen Shot 2022-05-13 at 2.43.00 AM.png

Since this approach requires page generation on the server, you still need an app server for hosting the website, so I took off a star for hosting flexibility.

Screen Shot 2022-05-13 at 2.45.17 AM.png

Because the generation of the pages is incremental, you don’t have to render all the pages for your entire website all at once, so the build speed would also be improved.

Summary

Incremental Static Generation (ISG) is a new exciting Nuxt 3 feature, so let us know what questions you have and we’ll address them in future tutorials.

Download the cheatsheets

Save time and energy with our cheat sheets, that give you all the essential syntax at your fingertips.

  • Vue 3 Composition API
  • Vue Essentials
  • Nuxt
  • Pinia
  • Vue Router
  • Vue 3 Migration Guide