What is Incremental Static Regeneration (ISR) in Next.js?
Answer
Incremental Static Regeneration (ISR) combines SSG and SSR — pages are generated at build time (like SSG) but can be regenerated in the background after a specified revalidation period without rebuilding the entire site. Pages Router ISR: add revalidate to getStaticProps: export async function getStaticProps() { const data = await fetchData(); return { props: { data }, revalidate: 60 // regenerate at most once every 60 seconds }; }. On the first request after 60 seconds, Next.js serves the cached page (stale) and regenerates in the background. The next request gets the fresh page. App Router ISR: add next.revalidate option to fetch: const data = await fetch("https://api.example.com/data", { next: { revalidate: 60 } }).then(r => r.json());. Or use route segment config: export const revalidate = 60; — applies to all fetches in the route. On-demand revalidation: trigger revalidation programmatically: revalidatePath("/posts") or revalidateTag("posts") in a Server Action or API route — useful for CMS webhooks. Benefits: static-file performance + fresh data; no rebuild needed; gradual rollout; cost-effective. stale-while-revalidate pattern: the key mechanism — serve stale content immediately while updating in background. Users always see a valid (possibly slightly stale) response without waiting for regeneration.