ISR: Static Speed with Dynamic Freshness

WHY IT EXISTS Pure Static Site Generation (SSG) is incredibly fast but requires a full site rebuild to update any content. Server-Side Rendering (SSR) is always fresh but slower and more costly, as it computes on every single request. Incremental Static Regeneration (ISR) was created to bridge this gap, offering static performance with on-demand freshness.

THE MENTAL MODEL Think of ISR as a 'stale-while-revalidate' caching strategy for entire pages. A user gets a fast, static page from a cache. If that page is past its 'best before' date, their visit triggers a background process to create a new version. They still see the old content instantly, but the next visitor gets the freshly baked page.

HOW IT WORKS In a Next.js page's getStaticProps function, you return a revalidate key with a time in seconds (e.g., revalidate: 60). When a request arrives for this page: 1. If the page was generated less than 60 seconds ago, the cached static HTML is served. 2. If it's been more than 60 seconds, the user is still served the stale, cached page immediately. 3. Simultaneously, Next.js triggers a rebuild of the page in the background, fetching new data. 4. Once complete, the new page replaces the old one in the cache for all subsequent visitors.

WHEN TO USE IT Use ISR for content that is mostly static but needs periodic updates without a full deployment. This is perfect for high-traffic blogs, e-commerce product pages with changing prices or stock, or marketing sites pulling content from a headless CMS. It's ideal when content freshness is important, but not real-time.

WHEN NOT TO USE IT Avoid ISR for highly personalized or real-time data, such as a user dashboard, a stock ticker, or a live chat feed. For these, use SSR or client-side fetching. Also, if the very first user hitting a stale page must see the new data, ISR is the wrong choice; use SSR instead, as it guarantees freshness on every request.

ONE CANONICAL EXAMPLE A popular blog post page. At build time, the page is generated statically. You set revalidate: 300 (5 minutes) in getStaticProps. For 5 minutes, all users get the instant, cached version. After 5 minutes, the next user to visit gets the stale version, but their request triggers a background rebuild. Any edits or new comments fetched by getStaticProps will appear in the newly generated page, which is then served to all subsequent users until the next 5-minute window expires.