Blazing Fast Apps with Incremental Static Regeneration

What is ISR?

Incremental static regeneration is a powerful tool provided by Next.js to give us the freedom to re-generate static web pages whenever we want. This gives us all of the benefits of static web pages like lightning-fast page loads, fantastic SEO, and the flexibility of updating the content on a page whenever we want. This is a great choice for high-traffic web apps and websites where pages rely on static content.

How can ISR benefit me?

Incremental static regeneration is great for static websites, or even specific pages in a web app that have static content that can change from time to time. For example, if a news article needs to be updated after it has been published, the last thing we want to do is rebuild our entire web app just to update the text on one page. With incremental static regeneration, a web page in production is built once and served to all of our visitors. When a change is made to some content that lives on a page, such as through a CMS like Sanity.io, we can tell Next.js that we want to re-generate only the page that has changed.

With Next.js, we can also use server-side rendering for this, but this can be very resource heavy and overkill for static pages. It also increases bandwidth and server resources unnecessarily. Opting in to ISR tells our Next.js server that a static web page only needs to be rebuilt when we tell it to.

A huge benefit of ISR is that it takes very little processing power compared to logic-heavy server-side rendered applications. This can save time, money, and create an optimized and memorable user experience. It’s a great option to choose for static content with very little additional development overhead.

Next.js also gives us the flexibility to use this feature on pages we choose as well. We don’t have to build our entire app to support ISR, so we can choose which pages it's most appropriate for. This is a massive benefit for apps that need a mix of server-side rendering and also have pages that can benefit from ISR.

When is ISR not appropriate?

ISR is only used for optimizing static pages. It’s not a great choice if content needs to update on each request, or if a page displays content that is specific to the user, like a user's profile page or an app that might show a list of a user’s banking transactions. We would want to use server-side rendering or client-side rendering in situations like this. But again, the best part about delivering web applications with Next.js is that we have the flexibility to make these decisions on a page-by-page basis to deliver the ultimate user experience.

Summary

At Stack Five, we use ISR whenever possible. The benefits of ISR are incredible. You can see our case study on how we used ISR to rebuild CFIB's marketing site. The incredible performance boost they see today speaks for itself.

The Vercel team also announced full support for on-demand incremental static regeneration last week. We are already using this cutting-edge technology in production applications, including on our Stack Five website to support our real-time content updates. You can learn more about on-demand ISR here and why we are so excited about this incredible feature.

Interested in learning more? Please reach out to our team and we'll show you how your web applications can benefit from ISR.