While learning new technologies such as Nextjs, I have stumbled upon many different ways to render your web applications. Nextjs has two forms of prerendering your content, such being Static Site Generation(SSG) and Server Side Rendering(SSR). Researching about the topic I found a hybrid that combines the best of both worlds called Incremental Static Regeneration(ISR).

How SSG and SSR stand out?

Static site generation and server side rendering are amazing rendering models, both have great benefits and have pretty nice features that you can integrate on many of your projects

Static Site Generation

The idea behind Static Site Generation is to generate all of your content ahead of time at build time, and push it to a CDN so the loading time of your application can be faster.

Think of it as if on build time you generate and render all of your HTML, CSS and JS and store it, so every time someone comes to your application, the user gets served with the already pre-rendered and pre-built content.

Static Site Generation sounds great! Yeah, in some cases SSG is a great option to use for building your applications. However every time you want the website to update its content, you'll have to re-build the application for it to show, and the larger the application is, the longer it's going to take for it to build.

Server Side Rendering

On the other hand we have Server Side Rendering. What SSR does is that every time someone visits your application, it's generating new html, in other words, every time a request is made, the data is fetched and the website is generated. The benefits of SSR is that it allows your application to be pre-rendered at server side, improving loading times in comparison to client side requests. This approach allows your application to always be updated with the latest content being more flexible than SSG having always updated content rather than building your application every time there is a change.

Just imagine what it would be like to have a static site generated social media, there's no way something like that would work having always new content being created!

SSR is usually used for applications that require real-time data fetching, so it will always show the latest content in your application. Because SSR is always requesting data from the server with each page on your application, depending on how many user's are using it, is going to affect drastically the server on performance. The solution on improving server performance would be hiring a better hosting service making this approach more expensive to host.

Incremental static regeneration saves the day

Incremental static regeneration is a feature introduced by Next.js where it allows you to create or update static pages after you buit your site, just as you would with static site generation but without needing to rebuild the entire site. You can consider ISR as a hybrid of SSR and SSG.

When a page that was pre-rendered at build time is requested, it will instantly show the cached page.

When a path that hasn't been generated at build time is requested, Next.js will server-render the page on first request. Any further request to that same path will be instantly served by the static file from the cache.

ISR can be greatly used on blogs, e-commerce, web portfolios, and more.

This makes ISR extremely flexible in comparison to server side rendering and static site generation combining the benefits of both approaches and removing some of the downsides each of them had.

Conclusion

Incremental static regeneration is a great tool to be used by taking advantage of the benefits it is provided by static site generation and server side rendering. It allows you to build amazing performant apps, cheaper scaling and a great development experience. Nextjs even allows you to have the flexibility of using a different rendering model for each page on your application by choosing between SSR, SSG and ISR. It's useful to have a solid understanding of how each of these models work, the differences between each one of them and knowing which one to use depending on the situation you are on to make the right decisions.

To learn more about Next.js, SSR, SSG and ISR visit the Next.js docs.