We all love Next.JS for its ability to render static pages for our dynamic content. Previously, when new content was added, one had to completely rebuild the site, but no longer!

Introducing: Incremental Static Regeneration, or ISR. ISR allows only a specific page to regenerate in the background when changes are detected. There are two ways to implement this feature: automatic regeneration and on-demand regeneration. I will cover both methods.

Automatic Regeneration

Automatic regeneration is handled by the Next functions getStaticProps() and getStaticPaths(). To implement ISR, we only have to worry about two lines of code:

[slug].

I’ve added the revalidate: 10 directive to getStaticProps(). This means that stale content will only be displayed for a maximum of 10 seconds, and then is revalidated and rebuilt in the background. The next refresh after this time expires will display the current content.

In getStaticPaths(), I've set fallback to blocking. What this does is, if the current path does not exist, it is Server-Side Rendered. Subsequent renders will be served from the cache from then on.

That’s it! It’s that simple.

On-Demand ISR

You may want to consider on-demand ISR, especially if you want new content to be live immediately. Let’s say you have an eCommerce store and you want to change the price of a product. We’ll create an API path that will allow us to regenerate a path or list of paths on demand. We’ll use a secure API key to prevent abuse.

Here’s the code for my API:

revalidate.js

Now we can test this by sending a request to the API:

Revalidate Request Example

That’s all there is to it. This new(ish) feature has completely solidified my committment to Next.JS. I hope you feel the same way!

For more great information, please Visit Our Blog.