New Nuxt 3 Feature: Incremental Static Generation
Tags: coding, nuxt, javascript, vue
Published: 2022-06-14 15:05:02

---
title: New Nuxt 3 Feature: Incremental Static Generation
published: true
date: 2022-06-14 10:00:00 UTC
tags: coding,nuxtjs,javascript,vuejs
canonical_url: https://www.vuemastery.com/blog/new-nuxt-3-feature-incremental-static-generation/
---

![Nuxt 3’s new Incremental Static Generation](https://cdn-images-1.medium.com/max/1024/1*sgLb-AEADz8vulcEpq1nYg.jpeg)

_Written by Andy Li_

{% youtube B2CvN93wI0I %}

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).

![](https://cdn-images-1.medium.com/max/1024/0*_aFzeefJZlSUOnfR)

### Server Side Rendering (SSR)

First, let’s talk about SSR.

When a client makes a request to the server:

![](https://cdn-images-1.medium.com/max/1024/0*J2bMtr2GN3d9lpwY)

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

![](https://cdn-images-1.medium.com/max/1024/0*MZA92EKc21OnD7qL)

Then the page gets sent back to the client:

![](https://cdn-images-1.medium.com/max/1024/0*-RwUsQcw2v7J-zW1)

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).

![](https://cdn-images-1.medium.com/max/1024/0*50wphnTb8umdZpUT)

When the client sends a request:

![](https://cdn-images-1.medium.com/max/1024/0*cBcjsJ1OBi0hqgRt)

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

![](https://cdn-images-1.medium.com/max/1024/0*cf9yd1bs1tunGvlD)

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:

![](https://cdn-images-1.medium.com/max/1024/0*BPYuv3KxARHI8jUh)

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:

![](https://cdn-images-1.medium.com/max/1024/0*lpjfMdQrsANIc8Du)

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

![](https://cdn-images-1.medium.com/max/1024/0*GR8WJOryH5E_Rj70)

And serve the new version for the next request:

![](https://cdn-images-1.medium.com/max/1024/0*5xD1XKaD70rU9FFW)

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

![](https://cdn-images-1.medium.com/max/1024/0*8bXv-F2NcT99D9X_)

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

![](https://cdn-images-1.medium.com/max/1024/0*GCAbxcjF0CQb3k3L)

> _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.)_

![](https://cdn-images-1.medium.com/max/1024/0*LhMw0Dl_2ANy-zXw)

> _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._

![](https://cdn-images-1.medium.com/max/1024/0*WstyibP2-xoWafSc)

> _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.

_Originally published at_ [_https://www.vuemastery.com_](https://www.vuemastery.com/blog/new-nuxt-3-feature-incremental-static-generation/) _on June 14, 2022._

* * *