React › Static Site Generation (SSG) & Hydration

What is incremental static regeneration and how does it solve the problem of static content becoming outdated?

Intermediate

Answer

Incremental static regeneration lets a statically generated page be automatically rebuilt in the background after a set amount of time, without needing to rebuild the entire site. This gives you both the speed of static pages and reasonably fresh content, without visitors ever seeing a slow, fully dynamic page.

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

export const revalidate = 60; // rebuild this page in the background at most once every 60 seconds

Real-world example A product page shows the same fast static page to most visitors, while Next.js quietly rebuilds it in the background every sixty seconds, ensuring the price and stock information never stays outdated for too long.

Common follow-ups: What happens to a visitor's request while a page is being regenerated in the background?;How is this approach different from simply rebuilding the entire site on every deployment?

Server-Side Rendering (SSR) & Next.js;Data Fetching (React Query & SWR)