mediumSystem Design

What is ISR (Incremental Static Regeneration) in Next.js and how do you implement it?

Q: What is ISR (Incremental Static Regeneration) in Next.js and how do you implement it?

**TL;DR.** **ISR** serves a **static** page and **regenerates it in the background** after a revalidate interval (or on demand), so content stays fresh **without rebuilding** the whole site. In the App Router you set export const revalidate = N or fetch with next: { revalidate: N } . request serve cached if stale regenerate bg <text class='d-sub' x='272' y=

418 views

Understand the problem

Updating static pages without a full rebuild.

nextjsisrrevalidatestatic

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Read the code

Time-based ISR on a route

// app/blog/[slug]/page.tsx
export const revalidate = 3600;    // regenerate at most once per hour

export async function generateStaticParams() {
  return (await getSlugs()).map((slug) => ({ slug }));
}
export default async function Post({ params }) {
  const { slug } = await params;
  return <Article post={await getPost(slug)} />;   // static + refreshed hourly
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What are the rendering strategies in Next.js (SSR, SSG, ISR, CSR)?

How do you pass data from Server Components to Client Components in Next.js?