What is Next JS Incremental Static Regeneration (ISR)?
Next JS is a popular React framework for building server-rendered and static websites. One of the powerful features introduced in Next JS is Incremental Static Regeneration (ISR).
What is Next JS?
Before we dive into ISR, let’s take a moment to understand Next JS. Next JS is an open-source React framework created by Vercel that allows for server-side rendering (SSR), static site generation (SSG), and client-side rendering (CSR). It’s designed to provide an optimal user experience through fast page loads and a better experience.
Why Incremental Static Regeneration?
To understand the need for ISR, let’s briefly revisit the concepts of SSR, SSG, and CSR.
Server-side rendering (SSR): With SSR, every request leads to a server-side render of the page, meaning the page is built on demand. This provides the most up-to-date content but can put a lot of strain on your server and slow down response times as traffic increases.
Static site generation (SSG): With SSG, pages are built at build time and reused for each request, allowing for excellent performance and low server loads. However, content updates require a full site rebuild, making it less suitable for frequently updated content.
Client-side rendering (CSR): CSR is when the rendering occurs in the client’s browser. While it offers interactive websites and robust client-side functionality, it can lead to slow initial load times.
Each of these methods has its advantages and drawbacks but what if you could combine the benefits of SSR and SSG? That’s where ISR comes into play.
Incremental Static Regeneration (ISR)
ISR is a feature introduced in Next JS that allows you to create static pages that are updated incrementally after they’ve been generated, combining the benefits of SSG and SSR. It allows static content to be updated over time, rather than needing a full rebuild of the site like in traditional SSG.
This strategy is perfect for pages that need to display somewhat dynamic data but doesn’t need to be updated with every single request. With ISR, your users get the speed of a static site with the flexibility of server-rendered content.
How does ISR work?
When a request is made to a page that uses ISR, one of two things happens:
On initial request: The page is generated on-demand, just like SSR. However, the rendered page is then cached and served to subsequent users, like SSG. This allows every future visitor to see the page instantly.
On subsequent requests: The server sends the cached (static) page to the user. In the background, Next JS checks if the page is due for regeneration. If it is, Next JS regenerates the page server-side, and the newly generated page replaces the old page in the cache.
The primary advantage of this approach is that your users never have to wait for the page to build. They either get the cached page instantly or the updated page if it’s already been regenerated.
Limitations
Here are the limitations of Incremental Static Regeneration (ISR):
Not suitable for real-time data updates.
Build time delay can lead to slower initial responses.
Inconsistent data freshness during the revalidation window.
Complex cache management.
Resource-intensive for high-traffic websites.
Limited support for non-event-based database updates.
Not ideal for pages with varying user-specific content.
Not suitable for complex client-side interactions (CSR).
Implementation
Implementing ISR in Next JS is straightforward because of the getStaticProps function and the revalidate property. The getStaticProps is used to fetch the data needed for pre-rendering and the revalidate specifies how often (in seconds) a page revalidation should occur.
Example
Here’s a simple example:
// pages/index.js
import React from 'react';
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await res.json();
return {
props: {
data,
},
revalidate: 1, // Page will attempt regeneration every 1 second
};
}
function Page({ data }) {
// Render data...
return (
<div>
<h1>Sample Data:</h1>
<pre>{JSON.stringify(data, null, 2)}</pre>
</div>
);
}
export default Page;
In this example, the getStaticProps fetches data from an API and returns this data as props to the component. The revalidate property is set to 1, which means the data will be re-fetched and the page regenerated every 1 second, if there are requests within this period.
Conclusion
ISR is a game-changing feature in the Next JS framework. It allows you to enjoy the best of both worlds — the speed and scalability of static sites and the flexibility of server-rendered sites. By using ISR, you can serve static content that updates incrementally as needed, providing a much more scalable solution for sites with dynamic content.
Free Resources
