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;