What is Incremental Static Regeneration (ISR) in Next.js?
Why Interviewers Ask This
This is a classic screening question for Next.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
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.
Common Mistake
Don't just define the term — demonstrate that you understand when to use it and when not to. Showing awareness of trade-offs is what separates average from strong Next.js candidates.