Incremental Static Regeneration (ISR)

Rendered via Cached (30s)

Location: New York City, NY

Temperature: 3°C

Wind Speed: 7.4 km/h

Rendered at: 2025-11-19T12:24:29.688Z

Incremental Static Regeneration (ISR)

Combines the best of SSG and SSR. Pages are statically generated but can be regenerated in the background after a specified time interval.

✓ Pros

  • •Fast like static pages
  • •Content stays relatively fresh
  • •Automatic background regeneration
  • •Best balance of speed and freshness

⚠ Cons

  • •First visitor after revalidation sees stale data
  • •Slightly more complex caching behavior
  • •Revalidation timing needs tuning
  • •May serve stale content temporarily

Performance Metrics

Server Duration

415.47ms

TTFB

measuring...

DOM Ready

measuring...

Full Load

measuring...

Server Duration: Time to render on server (SSG at build, SSR/ISR/Edge per request)

TTFB: Time to First Byte from browser perspective (network + server time)

DOM/Full Load: Browser-side parsing and resource loading times

Implementation Code

File:app/isr/page.tsx
export const revalidate = 30;

export default async function Page() {
  const data = await fetchData();
  return <DataCard data={data} />;
}

Key Configuration:

  • →revalidate = 30 sets cache lifetime to 30 seconds
  • →Serves cached version for 30s after first request
  • →After cache expires, next visitor triggers background regeneration while seeing cached content
← Back to Home