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?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the **Verified** section, against real output from a build or a running server; each Verified block names the version it ran on. ## 1. Why This Even Matters — A Story First A newspaper stand shows today's printed paper. Instead of reprinting every paper each time someone walks past (dynamic), or printing one edition at launch and never again (static), the vendor has a rule: if the paper on display is older than an hour when a customer comes, hand them that paper anyway and send someone to print a fresh one for the next customer. That is ISR: nobody waits for the press, and the display neve

The problem

Question presented to candidate: "Our blog has 20,000 posts. Rebuilding everything on each publish takes too long, and rendering every request is too expensive. How does ISR help, and how do you set it up?"

What a strong answer should cover:

ISR keeps a page static (prerendered, served from storage) but lets it be regenerated after deploy, without a rebuild.
Time-based: export const revalidate = n on the route, or next: { revalidate: n } on a fetch.
It is stale-while-revalidate: the first request after expiry still gets the old page and triggers a regeneration in the background.
On-demand: revalidatePath or revalidateTag mark content stale from a Server Action or webhook.
Pages not listed in generateStaticParams can be generated on first request and then cached, which is how ISR scales to many pages.

Clarifying questions expected:

"How stale may a post be after an edit?" — decides between time-based and on-demand.
"How many pages are there?" — decides how many to prerender at build time.

Code / implementation expected: Yes — a route with a revalidate time and a partial generateStaticParams list.

nextjs
isr
revalidate
static

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js docs shipped with the package (written on 16.3.4, re-reviewed against 16.4.2) and, in the Verified section, against real output from a build or a running server; each Verified block names the version it ran on.

1. Why This Even Matters — A Story First

A newspaper stand shows today's printed paper. Instead of reprinting every paper each time someone walks past (dynamic), or printing one edition at launch and never again (static), the vendor has a rule: if the paper on display is older than an hour when a customer comes, hand them that paper anyway and send someone to pr

The solution is hidden so you can try first

6 min read · 8 sections

Read the code

Time-based ISR with a partial prerender list

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

export async function generateStaticParams() {
  const top = await getTopPosts(100);        // build only the popular posts
  return top.map((p) => ({ slug: p.slug }));  // the rest are generated on first visit
}

export default async function Post({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const post = await getPost(slug);
  return <article><h1>{post.title}</h1><div>{post.body}</div></article>;
}

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.