Stop 11 · Next.jsTopics · 6/16

ISR

In short

ISR gives you static speed with data that stays reasonably fresh. Pages are prebuilt, then quietly rebuilt in the background after a time you choose.

Incremental Static Regeneration — static pages that automatically re-generate in the background after a set time, combining SSG's speed with fresher data.

The jaadu stands on a stool redrawing a food picture on a canteen chalkboard menu.

Think of it like this

The canteen menu board

The canteen writes today's menu on the board in the morning. Everyone reads the same board. Every few hours, someone checks the kitchen and rewrites it if things changed. Readers never wait, and the board rarely goes too stale.

Watch it happen

revalidate = 60 in action

Visitors

Page cache

Next server

t=20s GET /products/7

1/5Within 60 seconds of the build, the cached page is served instantly.

The big ideas

What you need to know

export const revalidate

revalidate = 60 means the page can be regenerated at most once every 60 seconds.

Stale first, fresh next

The visitor who triggers a refresh still gets the old page. The next visitor gets the new one.

On-demand refresh

Call revalidatePath("/blog") or revalidateTag() after an edit to refresh right away instead of waiting.

Scales to many pages

You don't have to prebuild 50,000 product pages. Build some, generate the rest on first visit.

See it in code

Walk through the code

tsx

1// app/products/[id]/page.tsx2export const revalidate = 60; // seconds3 4export default async function Product({ params }: { params: Promise<{ id: string }> }) {5  const { id } = await params;6  const res = await fetch(`https://api.example.com/products/${id}`);7  const product = await res.json();8  return <h1>{product.name}: ₹{product.price}</h1>;9}10 11// In a Server Action after an admin edits the price:12// revalidatePath(`/products/${id}`);

1/4Allow this page to be regenerated at most once every 60 seconds.

Time-based refresh covers normal updates. revalidatePath refreshes one page right away when you know it changed.

Save yourself the pain

Common mistakes

Oops

Expecting the very next visitor after 60 seconds to see the new data.

Do this instead

That visitor triggers the rebuild and still sees the old page. Fresh data shows from the following request.

Oops

Setting revalidate = 1 on every page to be safe.

Do this instead

Pick a time that matches how often data really changes, and use revalidatePath for urgent updates.

Your mission

Watch a page refresh itself

~25 min

Quick check

With revalidate = 60, a visitor arrives 90 seconds after the build. What do they get?

Go deeper

1Add a `revalidate` time to a statically generated page and observe the refresh behavior.
2Learn the difference between time-based and on-demand ISR revalidation.
3Understand ISR as a middle ground between SSG and SSR.