React Academy · Lesson

Incremental Static Regeneration (ISR)

Regenerate static pages on a schedule or on-demand without a full redeploy.

Incremental Static Regeneration (ISR) is a free React Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What Is ISR?

Incremental Static Regeneration lets Next.js serve a pre-built static page while regenerating it in the background after a specified interval — combining the speed of static HTML with the freshness of server rendering.

How ISR Works

On the first request, Next.js serves the cached static HTML. After the revalidation window expires, the next request triggers background regeneration. Subsequent requests serve the new page once regeneration completes.

Enabling ISR with revalidate

Export a revalidate constant or set next: { revalidate: N } on a fetch call inside a Server Component page.

// app/blog/page.tsx
export const revalidate = 60; // regenerate at most every 60 seconds

export default async function BlogPage() {
  const posts = await getPosts();
  return <PostList posts={posts} />;
}

ISR with Dynamic Routes

Combine generateStaticParams with revalidate to pre-build popular dynamic pages and revalidate them on a schedule.

// app/blog/[slug]/page.tsx
export const revalidate = 3600; // hourly

export async function generateStaticParams() {
  const posts = await getTopPosts(100);
  return posts.map(p => ({ slug: p.slug }));
}

export default async function PostPage({ params }) {
  const post = await getPost(params.slug);
  return <Article post={post} />;
}

On-Demand Revalidation

Call revalidatePath() or revalidateTag() from a Server Action, API route, or webhook handler to regenerate specific pages immediately — no waiting for the interval.

// app/api/revalidate/route.ts
import { revalidatePath } from 'next/cache';

export async function POST(req: Request) {
  const { secret, path } = await req.json();
  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: 'Invalid secret' }, { status: 401 });
  }
  revalidatePath(path);
  return Response.json({ revalidated: true, path });
}

Fallback Behavior for Unknown Paths

For dynamic routes not in generateStaticParams, set dynamicParams = true (default) to render on demand and cache, or false to return 404.

// app/blog/[slug]/page.tsx
export const dynamicParams = true; // default: render and cache unknown slugs
// export const dynamicParams = false; // return 404 for paths not in generateStaticParams

Stale-While-Revalidate

During regeneration, Next.js serves the stale page until the new version is ready. Users always get a response — no waiting for fresh data.

ISR vs SSR vs Static

Static: built once, never changes. ISR: pre-built, regenerates on schedule. SSR: renders fresh on every request. Choose ISR for content that changes occasionally but benefits from static serving speed.

ISR Caveats

ISR is not suitable for personalized content (user-specific data) or data that must be real-time. For those, use no-store fetches and SSR.

Pages Router ISR (getStaticProps)

In the Pages Router, ISR uses getStaticProps with a revalidate return value — the same concept, different API.

// pages/blog.tsx (Pages Router)
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts }, revalidate: 60 };
}

Verifying ISR

Check the x-nextjs-cache response header: HIT means served from cache, MISS means freshly rendered, STALE means serving stale while revalidating.

Quick Check

What happens when a user requests an ISR page whose revalidation window has just expired?

Recap

ISR pre-builds pages and revalidates them every N seconds via export const revalidate = N. Use generateStaticParams for popular dynamic routes and on-demand revalidation via revalidatePath/Tag for immediate freshness after mutations.

Frequently asked questions

Is the “Incremental Static Regeneration (ISR)” lesson free?

Yes — the full text of “Incremental Static Regeneration (ISR)” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Incremental Static Regeneration (ISR)”?

Regenerate static pages on a schedule or on-demand without a full redeploy. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Incremental Static Regeneration (ISR)” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to React Academy