Sign in
Skip to solution
mediumSystem Design

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

418 views
01

Understand the problem

Updating static pages without a full rebuild.

nextjsisrrevalidatestatic
02

Attempt it yourself

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

Nudge consolestandby

Stuck? Beam a request up — the console returns a conceptual nudge that guides your logic without spoiling the implementation.

03

Study the solution

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 }.

Solution ready — 2 min read

Classified // press E to declassify

04

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
}
05

Join the discussion

Discussion (0)

Sign in to join the discussion.

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

Transmission complete // awaiting log

KEEP THE
STREAK ALIVE.

Dossier 58 of 95 decoded in the Next.js track. One more won't hurt.

Back to track