Next.js ISR Explained — Incremental Static Regeneration

DodaTech Updated 2026-06-28 1 min read

In this tutorial, you will learn about Next.js ISR Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Incremental Static Regeneration (ISR) combines the speed of static generation with the freshness of server rendering, updating static pages after deployment without rebuilding the entire site.

What You'll Learn

Time-based revalidation with revalidate
On-demand revalidation API
Webhook-triggered regeneration
Stale-while-revalidate pattern
ISR deployment considerations

Why It Matters

ISR eliminates the build-time tradeoff of SSG. Pages are served statically (fast) and updated in the background when stale, providing both performance and freshness.

// app/posts/[slug]/page.jsx (App Router)
export default async function PostPage({ params }) {
  const post = await fetch(`https://api.example.com/posts/${params.slug}`, {
    next: { revalidate: 3600 },
  }).then(r => r.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <p>Last updated: {post.updatedAt}</p>
      <div>{post.content}</div>
    </article>
  );
}

export async function generateStaticParams() {
  const posts = await fetch("https://api.example.com/posts").then(r => r.json());
  return posts.map(post => ({ slug: post.slug }));
}

// app/api/revalidate/route.js — On-demand revalidation
import { revalidateTag, revalidatePath } from "next/cache";

export async function POST(request) {
  const { tag, path, secret } = await request.json();

  if (secret !== process.env.REVALIDATION_SECRET) {
    return Response.json({ error: "Invalid secret" }, { status: 401 });
  }

  if (tag) revalidateTag(tag);
  if (path) revalidatePath(path);

  return Response.json({ revalidated: true });
}

Expected output: Blog posts are statically generated at build, revalidated every hour, and instantly refreshed via webhook-triggered on-demand revalidation.

← Previous Next.js Server-Side Rendering (SSR) Explained — Dynamic Pages Next → Next.js API Routes Explained — Backend API in Next.js

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Nextjs