What is Incremental Static Regeneration (ISR)?

What You'll Learn

ISR concept
Time-based revalidation
On-demand revalidation

Time-Based ISR

code.txtTSX

// app/blog/[slug]/page.tsx

// Revalidate every 60 seconds
export const revalidate = 60;

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

Fetch-Level Revalidation

code.txtTSX

export default async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // 1 hour
  });

  return <div>{data}</div>;
}

On-Demand Revalidation

code.txtTSX

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

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

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

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

Webhook Trigger

code.txtTSX

// Called from CMS webhook
fetch('/api/revalidate', {
  method: 'POST',
  body: JSON.stringify({
    secret: 'my-secret',
    path: '/blog/updated-post'
  })
});