How does ISR takes advantage of static generation and server side rendering

How does ISR takes advantage of static generation and server side rendering

Get the benefits of Static Site Generation and Server Side Rendering with Incremental Static Regeneration

ยท

3 min read

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.

ssg.png

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

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.

isr.png

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.

Personal Blog

Click here to visit my personal blog to get access to early content for future posts.

ย