Incremental Static Regeneration (ISR)

The Problem ISR Solves

Pure SSG is extremely fast but goes stale until the next full build. Pure SSR is always fresh but costs server work on every request. ISR sits between them: pages are served statically, but Next.js automatically regenerates them in the background after a time interval you choose — without needing a full site rebuild.

How ISR Works

Setting Up ISR

Add a revalidate option to a fetch call — or export a route segment config — with the number of seconds before that content is eligible for regeneration.

// app/products/[id]/page.tsx
async function getProduct(id) {
  const res = await fetch(`https://api.example.com/products/${id}`, {
    next: { revalidate: 60 }, // regenerate at most once every 60 seconds
  });
  return res.json();
}

export default async function ProductPage({ params }) {
  const product = await getProduct(params.id);
  return <h1>{product.name}</h1>;
}

Alternatively, exporting a revalidate constant from the page file applies the same interval to the whole route segment:

export const revalidate = 60; // seconds

Stale-While-Revalidate Behavior

ISR follows a stale-while-revalidate model: once the interval passes, the currently cached (now "stale") page is still served immediately while a fresh version regenerates in the background for next time. This means visitors never experience the delay of a rebuild.

FAQs

Summary

ISR combines the speed of static pages with content that refreshes on a schedule, without a full rebuild. With all four rendering strategies covered, the next section turns to data fetching and caching in more depth.