Incremental Static Regeneration (ISR)

Static pages that update in the background - best of both worlds

Cache Status: STALE REVALIDATING

How ISR Works

1. Static First

Pages are pre-rendered at build time for instant loading

2. Background Updates

Content revalidates in background after specified time

3. Seamless Refresh

Users get fresh content without waiting for builds

sunt aut facere repellat provident occaecati excepturi optio reprehenderit

quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto

Post #1Updating...

qui est esse

est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla

Post #2Updating...

ea molestias quasi exercitationem repellat qui ipsa sit aut

et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut

Post #3Updating...

Technical Details

Revalidation Strategy:

Time-based (60 seconds)

Cache Status:

stale-revalidating

Last Generated:

10/1/2025, 6:55:15 PM

Content Source:

JSONPlaceholder API

ISR Benefits

  • Fast initial page loads (static generation)
  • Fresh content without full rebuilds
  • Automatic fallback to cached content during API failures
  • Reduced server load with intelligent caching

🔄Technical Deep Dive: How ISR Works

ISR Revalidation Lifecycle

1
Initial Build (t=0)
Static page generated with initial data
Build Time
2
Serve Cached (t=0-60s)
Static file served instantly from cache
Cache Hit
3
Trigger Revalidation (t=60s+)
First request after revalidate time triggers background update
Stale While Revalidate
4
Background Update
New data fetched and page regenerated in background
Background Process
5
Cache Update
New version replaces cached version when ready
Cache Update

ISR Configuration Code

Page-level Revalidation:

// page.tsx
export const revalidate = 60;

export default async function Page() {
  const data = await fetch(url, {
    next: { revalidate: 60 }
  });
  return <div>{/* content */}</div>;
}

Fetch-level Revalidation:

// Individual fetch control
const posts = await fetch(url, {
  next: { 
    revalidate: 60,  // 60 seconds
    tags: ['posts']  // Cache tags
  }
});

// On-demand revalidation
revalidateTag('posts');

Current Cache State Visualization

🟢
Fresh
Content is current
🟡
Stale-Revalidating
Updating in background
← Current State
🔴
Fallback
Using cached fallback

ISR vs Other Strategies

StrategyInitial LoadData FreshnessServer LoadBuild Time
SSG⚡ Instant❌ Build-time only✅ Minimal⚠️ Can be long
SSR⚡ Fast✅ Always fresh❌ High✅ Quick
ISR⚡ Instant✅ Configurable✅ Low✅ Quick
CSR❌ Slow✅ Real-time✅ Minimal✅ Quick

ISR Use Cases & Examples

Perfect for:

  • E-commerce product pages
    Price/inventory updates without rebuilds
  • Blog posts with comments
    Static content with periodic updates
  • News articles
    Breaking news updates without full rebuilds

Configuration Examples:

High-traffic pages: revalidate: 3600
1 hour - reduce server load
Dynamic content: revalidate: 60
1 minute - frequent updates
News/alerts: revalidate: 10
10 seconds - breaking news