A Guide to Incremental Static Regeneration: Transforming the Web Experience With NextJs ISR

In one of our blog posts, we previously discussed what is Jamstack. Just a quick recap: this approach essentially allows us to enjoy the benefits of pre-rendered static pages, like speed and security, without giving up on interactivity.

Those static pages are sent to a content delivery network, which makes them fully available as static files in a matter of seconds thanks to, for example, the export async function getStaticProps.

But there is a crucial problem: static sites, while easy to load and provide a great user experience with, take some time to build – if you have to add thousands of products to your online store, it will take forever. This is where a key difference between static and dynamic websites comes into play.

This is a vital issue for large-scale shops and other enterprises, which means they need a more flexible solution – and here incremental static regeneration (ISR) may come in handy.

ISR is a relatively new feature of Next.js, which is a simple and minimalist JS framework, and one of the leading platforms for building React apps.

In one sentence, this method allows us to update content without the need to redeploy the page, which translates to better performance and security, as well as a shorter building time. Let’s dive into the details!

From this article, you will learn:

• What the methods of serving static content pages are

• What are the differences between the classic approaches to static generation – SSG and SSR – are

• What is incremental static regeneration, how it works and why it’s being used

• What are the main benefits of incremental static regeneration in Next.js

• What are the options in ISR for optimizing the performance

• How the mixed approach works

Introduction to Incremental Static Regeneration (ISR): What Are the Classic Approaches and How Is NextJs ISR Different?

Within the Jamstack realm, there are two “classic” approaches, namely static site generation and server-side rendering, and of course both have their pros and cons. Let’s take a look!

Static site generation

This method is possible thanks to so-called static site generators – these are pieces of software enabling the creation of pages from templates, components, and a specific content source. You feed them with content and the generator prepares a ready-to-use website.

The previously generated pages are pre-rendered during the build time and, in order to add new content or components, you have to rebuild the whole site again from the scratch.

Well, to be more precise, it’s not you in person who’d need to build it – it’s the static site generator’s task that will be processed in the background, if it’s set up well.

Needless to say, this approach only suits websites where content isn’t changed so often (farawell, news websites!), otherwise the process would take forever. It may also be problematic when your application is very big. But very, very big.

However, among the advantages of static-generated sites we can list great speed, easy deployment, version control, and enhanced security (because there is no database that could fall victim to an attack).

Server-side rendering

With server side rendering, you don’t render pages in the browser, but directly on a server, and then pass them to the browser. They are not generated during the build time, but on each user’s request.

Thanks to this approach, it is easy to change the code without having to build the whole app again and again.

This approach is good for complex apps with extensive user interaction, where content is changing quite often or it is tailored to the specific needs of specific (groups of) users – such as big ecommerce stores or social media platforms.

Those websites, however, are slightly slower to load, because the app is rendered twice – on the server and on the client’s side – and this can make a big difference.

They are also less secure than in the case of SSG, and need more powerful (and costly) servers.

What Is Incremental Static Regeneration (ISR)?

ISR is a feature available with Next.js that allows your site to add or update pages after the initial site build. Initially, the page is generated at build time, but it can be updated as needed, in the background, during runtime. Why is it cool? This incremental approach offers the speed of static sites with the flexibility of server-side rendering (SSR).

In simpler terms: imagine you are creating a cake, and every time you want a new slice, you have to bake a whole new cake. Sounds inefficient, right? Using Incremental Static Regeneration makes it all reasonable: it's as if you have a personal chef (the server) baking fresh slices of cake (web pages) on demand, but without discarding the rest of the cake.

Why Is NextJs Incremental Static Regeneration Crucial for Your Application?

As we have said, in the case of SSG you have to pre-render all the pages, which consumes a lot of time, especially when the content is often changing.

With SSR, however, each page also has to be rendered each time a user makes a request, which means that the same content is generated over and over again, which is a waste of resources when the content is mainly static.

Take the “About us” page, for example. In most cases, it’s the very same page that is being shown to every user, no matter their location or browser used.

This is where ISR comes into play. It is best described as a hybrid between SSG and SSR. It is also a relatively new feature available in Next.js, so how does it work, exactly?

In the case of incremental static regeneration, a static page is being generated during the first request (of any user) on a specific page – and not during the build.

The user most often gets a fallback page for the time of waiting, which appears immediately, and, once the data is resolved, they are served the final page.

This method reduces the build time, all while keeping the page generated for future visitors who may enjoy shorter response time.

While working on Next.js development services, we can set the time when this initial page should be generated once again (regenerated).

So, ISR enables websites to use a “one page at a time” approach without having to rebuild the whole site from scratch. You can keep all the benefits of static pages, even on a website that has millions of them (and counting). This strategy is called “stale-while-revalidate”.

This means incremental static regeneration will be perfectly suitable for big headless ecommerce websites with hundreds of thousands of pages. With static site generators, they would have been built within hours.

Main Benefits of ISR NextJS Solutions – Why Should You Consider It?

There are some benefits that differentiate incremental static regeneration from static site generation and server-side rendering.

Improved Performance: Faster Page Loads and Reduced Server Load

ISR gives your users a first-class experience, loading web pages as quickly as flipping a page in a magazine. By regenerating pages in the background, users are always served a static (and hence, fast) version of the page, resulting in faster load times. On top of that, it drastically reduces the server load. Instead of the server laboriously baking fresh pages on each user request, ISR allows it to bake only when necessary, easing the strain on server resources.

This means that users are more likely to visit the website, and this helps you achieve business goals easier.

Real-time Updates: Serving Content without Re-rendering

Incremental Static Regeneration (ISR) ensures your web content is never stale. The real-time updates made possible by ISR mean that your website can showcase the most recent information without requiring a complete site re-rendering. As the static page is served to users, the server can simultaneously update it in the background, if required. This approach ensures that your site is always up-to-date while maintaining the high speed of static content delivery.

Cost Efficiency: Minimize Resource Usage by On-Need Regenerating

ISR provides an efficient way to use server resources. Traditional server-side rendering might demand high computational power, especially for high-traffic sites, as it regenerates the entire page for each request. ISR, on the other hand, takes a more resource-friendly approach. It regenerates pages only when necessary, reducing the computational workload on the server and leading to cost efficiencies.

You only use what you need, and nothing more. What's more, the application can be built in a shorter period, especially when it is big or growing quickly, which cuts down the costs.

Scalability: Handle High Traffic Efficiently with Pre-rendered Pages

With pre-rendered pages, your website is like a well-organized kitchen ready to serve any number of guests. Regardless of the traffic, each user receives their content fast and efficiently. ISR scales gracefully with traffic, ensuring your site remains responsive and resilient.

Optimizing Performance with ISR and Next.js – What Are The Options?

ISR not only revamps the traditional methods of site generation but also, quite simply, makes your web experience better. It gives your users the gift of speed, the charm of real-time updates, and the consistency of a well-managed website.

Whether you're looking to optimize an existing Next.js project or embark on a new one, incorporating ISR can prove to be a critical decision toward improved performance and a better user experience.

There are a few different options you can choose from while using ISR. Let’s take a closer look!

Automatic revalidation

This is the default option thanks to which the pages will be regenerated after a fixed interval, which can be chosen by the developer. There is no need for additional configuration, as the whole process is automated.

The drawback of this solution is that users that enter the site in this interval might not see the latest version of the cached page. Obviously, the more often the content of the website changes, the shorter this interval should be.

Anyway, it is useful when it comes to pages that are frequently updated with new content.

On-demand revalidation

As the name indicates, a static page is regenerated on demand. The pages are revalidated the moment new or changed content is updated into the CMS and published. In this case, the user always sees the latest version.

It is reasonable to use this solution on pages where the content only updates from time to time, which makes it easier to manage the resource consumption.

How Incremental Static Regeneration Works in Next.js Projects?

ISR in Next.js takes the best of static site generation and server-side rendering. When a request comes in for a page, the server first checks if a static version of the page is available. If it exists, the static page is immediately returned. Meanwhile, the server looks at the age of the page. If it's older than a predefined interval, the server will regenerate the page in the background and replace the old one.

Thus, the server efficiently manages a cycle of serving, checking, and regenerating, ensuring that the site remains fresh, fast, and efficient without any downtime or delay for the end user.

Can You Mix Different Approaches To Serving Static Pages?

It's worth adding that you can connect the above options. Pages may be regenerated both on demand and additionally – for the sake of safety – every 60 seconds, or via another time interval.

And you have full freedom in choosing which pages should be revalidated according to which method and what the time interval should be for each.

This way, you can set a longer interval for pages that are of less importance, or their content doesn’t change very often, while also choosing the on-demand approach for pages of crucial importance.

You can also incorporate different rendering approaches to different parts of your website – for example, you can choose SSG for pages with content that almost never changes, like the privacy policy in an online store.

Can You Combine ISR with Dynamic Data in Next.js?

Indeed, you can merge ISR with dynamic data in Next.js. ISR allows the static generation of pages at build time, while also enabling the fetching of dynamic data during this process. This way, you can pre-render pages using data that might change over time, while setting up an incremental regeneration process for when the data updates. This gives you the flexibility to have constantly updating content on your website without compromising on the advantages of static generation.

Best Practices & Examples of ISR NextJs Implementation

ISR is a powerful tool when used appropriately. Some best practices include:

• Using it for frequently updated pages

• Setting sensible revalidation times

• Testing under different network conditions

E-commerce Websites

A great example of ISR is e-commerce sites, where product availability and pricing can change frequently. ISR allows these pages to remain fresh and up-to-date, all while maintaining the speed and performance of a static site.

News and Media Websites

These platforms require frequent updates to publish the latest news and articles. Traditional static site generation can be inefficient as it would involve rebuilding the entire site with each update. With ISR, news sites can publish updates instantly and incrementally, ensuring that readers always have access to the most recent content without impacting site performance.

Real Estate Portals

Real estate listings can change rapidly, with new properties being added, old listings being sold or rented, and price adjustments. Using ISR, these portals can maintain up-to-date listings and provide users with the most current information. Additionally, it can improve the user experience by delivering fast, pre-rendered pages that can handle high traffic efficiently.

Incremental Static Regeneration For Content Management Systems Consideration

When paired with a headless CMS, Incremental Static Regeneration becomes a powerful tool in maintaining dynamic, high-performance websites. A headless CMS allows for frequent content updates, which can trigger ISR in your Next.js application. This way, changes in your CMS can result in specific pages being regenerated, rather than a full-site rebuild, leading to faster updates and a more efficient content delivery mechanism. It aligns with the core premise of a headless CMS – separating content management from content presentation, thereby ensuring flexibility, scalability, and performance. It's the perfect recipe for a dynamic, efficient, and high-performing website.

In combination with a headless CMS, ISR takes efficiency and performance to another level, making it an ideal approach for modern web development. Whether you run an e-commerce store with thousands of products, a blog site with ever-changing content, or a corporate site that needs to be accurate and updated, ISR is a versatile, reliable, and cost-effective solution.

Conclusion: Enhancing Web Experience with NextJs ISR

Incremental static regeneration is a fairly new way to update static pages, used mainly for custom-built websites with the Jamstack approach, which is based on static sites with dynamically generated content (each of them is a separate static file).

It allows for the better management of resources, both in the context of performance, and build time. It will be gaining popularity as websites expand and become more and more rich in content. As we had stated in the title, ISR is key to reducing websites’ costs and workload.

Being an eCommerce & web development services company with over 10 years of experience, we've created various Next.js websites and apps.

If you’d like to discuss how we can help you build an optimized app for you, simply contact us!