Next.js 16 ISR & Cache Demo

Cached with ISR

Cache Life: seconds (60s)

Generated At: 2025-11-30T10:34:41.592Z

This article is cached on-demand using Next.js ISR. The first request generates the page, subsequent requests serve the cached version for 60 seconds.

Isr Best Practices

This is a dynamically generated news article with on-demand ISR. The content is cached for 60 seconds after the first request, then automatically revalidated.

The page provides a Suspense boundary and passes the params promise directly to the cached component. This eliminates any intermediate compute layer - the promise is resolved inside the cached component, so everything is cached together.

How This Works:

The page shell renders immediately with a Suspense boundary
The params Promise is passed directly to CachedStory using params.then(p => p.slug)
CachedStory awaits the slug promise and uses 'use cache' with cacheLife('seconds') for 60s cache
First request to a slug has a 2s delay (simulated), cached requests are instant
After 60s, the cache automatically revalidates on the next request
No intermediate compute layer - promise unwrapping happens inside the cached component

Loading article...

News Article

Isr Best Practices

How This Works:

Isr Best Practices

How This Works: