ISR

Fetched via ISR Logic

Generated: Calculating...

Incremental Static Regeneration

With cacheComponents enabled, we no longer use page-level exports. Instead, we use the 'use cache' directive and the 'cacheLife' profile to define our revalidation window.

Environment

Vercel Serverless

Verification Lab

Refresh to see the 'Loading' state trigger in your browser.

Strategy

Unified ISR: Uses the 'use cache' directive paired with 'cacheLife' for granular, component-level revalidation.

Hydration

Server sends finished HTML. Browser 'hydrates' it for interactivity.

Response Headers Lab

Response Headers

Cold start. No cache exists yet.

200 OK

Cache-Control:public, s-maxage=30, stale-while-revalidate

X-Vercel-Cache:MISS

Infrastructure Layer

X-Nextjs-Stale-Time:300

Infrastructure Layer

Age:0

Architectural Insights

Hover over headers to reveal
Infrastructure Lifecycle Data.

Time-Travel Simulator

Use the timeline buttons at the top to simulate how headers evolve over time in a production environment.

Standard:

Unified Explicit Caching (v16)

Infrastructure Verified

Modern ISR Pipeline

Order of operations

Cache Hit

The component is served from the Unified Cache.

TTL Expiry

Next.js checks the cacheLife profile. If expired, it marks it for revalidation.

Background Revalidation

The NEXT request triggers a background update while serving the cached version.

Unified Update

Data is refreshed and the new version is persisted in the cache for the next visitor.

Implementation Blueprint

app/page.tsx

import { unstable_cacheLife as cacheLife } from 'next/cache';

export default async function Page() {
  'use cache'; // ⚡ Mark as cached
  
  // ⏱️ Custom 30s revalidation
  cacheLife({
    stale: 0, 
    revalidate: 30, 
    expire: 60
  }); 
  
  const data = await fetch('https://api.com/data');
  
  return (
    <main>
      <h1>{new Date().toLocaleTimeString()}</h1>
      {data.map(item => <Card key={item.id} {...item} />)}
    </main>
  );
}

ISR provides the speed of static sites with the freshness of dynamic sites. In Next.js 16, this is achieved by caching the component's output and defining a TTL profile.

Modern ISR: The cacheLife Profile

In Next.js 16, revalidate is deprecated. The modern way is to use cacheLife profiles directly inside your cached scope.

"seconds"

'use cache';
cacheLife('seconds');
// Short TTL window

Ideal for stock prices or live scores.

"minutes"

'use cache';
cacheLife('minutes');
// Moderate TTL window

Perfect for weather or trending topics.

"hours"

'use cache';
cacheLife('hours');
// Long TTL window

Best for blog posts or documentation.

i
Default Profile Values

Profile Name	Stale After	Revalidate After	Max Age (Expire)
"seconds"	1 second	1 minute	1 minute
"minutes"	1 minute	5 minutes	14 days
"hours"	1 hour	1 day	14 days
"days"	1 day	1 week	14 days

Why switch to cacheLife?

Unlike the page-level revalidate export, cacheLife allows you to set different TTLs for different components on the same page. You can have a Navbar cached for "weeks" and a News Feed cached for "seconds".

Live Demo

These products are cached using Unified ISR with a "seconds" profile.

Testing Tip

Refresh after 30s. The 1st refresh triggers the background update, the 2nd shows it.Note: Granular caching is now managed inside the component itself.

beauty

2.56 (99 reviews)

Essence Mascara Lash Princess

The Essence Mascara Lash Princess is a popular mascara known for its volumizing and lengthening effects. Achieve dramatic lashes with this long-lasting and cruelty-free formula.

Next Topic