Incremental Static Regeneration (ISR)

SSG with timed revalidation that regenerates pages in the background. Excellent for Catalogs, News sites, and Product listings that need periodic updates without full rebuilds.

Server

🌐
Request
Response
🖥️
Server checks cache
Cache valid or expired
Server fetches data
React.renderToString()
Server stores in cache
Server sends rendered HTML

Client

Client receives HTML
React.hydrate()
✨Page interactive
Benefits x Trade-offs

Benefits

  • •Best of Both Worlds: Static performance + dynamic updates
  • •Automatic Revalidation: Content stays fresh
  • •Scalable: Handles traffic spikes gracefully
  • •Cost Efficient: Reduced server load

Trade-offs

  • •Brief staleness: Content may be slightly outdated
  • •Revalidation overhead: Background regeneration costs
  • •Complex caching: Need to manage revalidate times
  • •First request delay: May trigger regeneration
How to implement?

ISR uses async Server Components with page-level revalidation. Use generateStaticParams for dynamic routes.

export const revalidate = 3600; // 1 hour

export async function generateStaticParams() {
  return [{ id: "1" }, { id: "2" }];
}

export default async function ISRComponent({ params }: { params: { id: string } }) {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return <div>{data.message}</div>;
}
  • •Components are async functions (no 'use client' directive)
  • •Cannot use React hooks (useState, useEffect, etc.)
  • •Add 'export const revalidate = 3600' at page level (1 hour)
  • •Use generateStaticParams() for dynamic routes
  • •Use revalidatePath() or revalidateTag() for on-demand revalidation