What is incremental static regeneration (ISR)?

Incremental Static Regeneration (ISR) is a feature, primarily popularized by Next.js, that allows you to update static pages *after* they have been built, without needing to rebuild the entire site. It combines the benefits of static-site generation (fast performance, SEO) with the flexibility of server-side rendering (fresh data).

What is Incremental Static Regeneration (ISR)?

ISR is a mechanism that enables you to build and ship static sites while allowing certain pages to be re-rendered in the background at defined intervals. This means your users always see a fast, statically served page, but the content can be updated periodically without a full application rebuild or redeploy. It's a hybrid approach that leverages the best of static generation and server-side rendering.

How does ISR work?

In Next.js, you implement ISR by using the revalidate option within the getStaticProps function. This option specifies a time in seconds after which a page is considered 'stale' and a re-render should be attempted.

export async function getStaticProps() {
  const res = await fetch('https://api.example.com/posts');
  const posts = await res.json();

  return {
    props: {
      posts,
    },
    // Revalidate the page every 60 seconds (1 minute)
    revalidate: 60,
  };
}

When a request comes in for a page that was generated with revalidate:

• If the page was never generated before or if the last generation was within the revalidate timeframe, the statically generated page is served immediately from the cache.
• If the page is accessed *after* the revalidate time has passed, the stale (cached) page is still served immediately to the user.
• In the background, Next.js then triggers a re-generation of the page. It re-runs getStaticProps to fetch fresh data and re-builds the page.
• Once the new page is successfully generated, it replaces the old cached version. Subsequent requests will then receive the newly generated page until the revalidate time passes again.

Benefits of ISR

• Improved Performance: Pages are served from a CDN (Content Delivery Network) cache, leading to extremely fast load times.
• Always Fresh Content: Content can be updated periodically without requiring a full site rebuild, ensuring users see relatively up-to-date information.
• Better SEO: Pages are pre-rendered at build time (or on first access after revalidation), making them easily crawlable by search engines.
• Reduced Build Times: Only the necessary pages are re-generated, significantly reducing overall build times compared to re-building the entire site.
• Scalability: The re-generation process happens in the background, minimizing server load during peak traffic.

When to use ISR?

• Dynamic Content with Static Benefits: Ideal for pages where content changes regularly (e.g., blog posts, product listings, news articles) but doesn't need to be real-time on every request.
• Large Websites: For sites with many pages that would take too long to build entirely on every content change.
• Data-driven Pages: When you want to pre-render data on the server for better performance and SEO, but the data source is updated frequently.
• Hybrid Approach: When you need a balance between the speed and reliability of static sites and the data freshness of server-rendered or client-fetched pages.