Incremental Static Regeneration (ISR) is a powerful feature in Next.js that allows you to update static pages after they have been built. This bridges the gap between fully static sites (which require a full rebuild for updates) and server-rendered pages (which are generated on every request). With ISR, your pages are generated at build time, but then can be re-generated in the background at a defined interval, ensuring your users always see fresh content without sacrificing the performance benefits of static generation.
Think of it as a 'stale-while-revalidate' strategy. When a user requests a page with ISR enabled, they receive the statically generated version. In the background, Next.js checks if it's time to re-generate that page based on the configured revalidation interval. If it is, it fetches the latest data, builds a new static page, and then serves that new version to subsequent requests. This means initial requests are lightning-fast, and updates happen seamlessly without downtime.
To implement ISR, you need to configure the revalidate option within getStaticProps. This option accepts a number in seconds, specifying how often the page should be re-generated. If revalidate is set to a positive number, Next.js will attempt to re-generate the page in the background after that many seconds have passed since the last generation. If the page is requested while it's being re-generated, the user will still receive the old, statically generated version.
export async function getStaticProps() {
const res = await fetch('https://api.example.com/posts');
const posts = await res.json();
return {
props: {
posts,
},
// Next.js will attempt to re-generate the page: 60 seconds
revalidate: 60,
};
}The revalidate value of 60 means that after 60 seconds, the next request for this page will trigger a background re-generation. If another request comes in within those 60 seconds, the existing static page will be served.
graph TD
A[User Request] --> B{Is page stale?};
B -- No --> C[Serve Stale Page];
B -- Yes --> D[Generate New Page in Background];
D --> E[Store New Page];
C --> F[Next Request];
E --> F;
F --> G{Is page stale?};
G -- No --> H[Serve New Page];
G -- Yes --> D;
When revalidate is set, it enables ISR. If revalidate is not set, or if it's set to 0 (or false), the page will be purely static and only rebuilt during a full site build. Setting it to a number greater than 0 introduces the incremental regeneration capability.
ISR is particularly useful for content that changes frequently but doesn't require real-time updates for every single user. Examples include blog posts, product listings, news articles, or any data that's updated on an hourly, daily, or even more frequent basis. It offers an excellent balance between performance and freshness.
It's important to note that ISR is supported by Next.js deployment platforms like Vercel. When you deploy your Next.js application with ISR enabled, the platform handles the re-generation process, ensuring your site remains fast and up-to-date.