mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
Hendrik LiebauandGitHub
469e513c5f
This PR adds error handling for nested `"use cache"` where the inner cache has a very short lifetime (zero `revalidate` or `expire` under 5 minutes) but the outer cache doesn't have an explicit `cacheLife()` call. Short-lived caches become "dynamic holes" that are excluded from prerenders. When such a cache is nested inside another `"use cache"` without an explicit `cacheLife`, the outer cache's lifetime would silently become short too via [propagation](https://nextjs.org/docs/app/api-reference/functions/cacheLife#nested-caching-behavior), which can lead to unexpected behavior. To prevent this accidental misconfiguration, Next.js now throws an error during prerendering, requiring developers to explicitly declare their intent by adding `cacheLife()` to the outer cache. The implementation tracks whether `revalidate` and `expire` were explicitly set via `hasExplicitRevalidate` and `hasExplicitExpire` flags on the collected cache result. Errors are wrapped with `wrapAsInvalidDynamicUsageError` to capture proper stack traces and prevent userland try/catch from suppressing the build error. Documentation has been updated with a new "Prerendering behavior" section in the `cacheLife` API reference explaining how short-lived caches become dynamic holes, and a "Nested short-lived caches" subsection with examples showing how to fix the error. closes NAR-761
96 lines
2.2 KiB
TypeScript
96 lines
2.2 KiB
TypeScript
import { connection } from 'next/server'
|
|
import { cacheLife } from 'next/cache'
|
|
import { Suspense } from 'react'
|
|
|
|
async function revalidateZero() {
|
|
'use cache: remote'
|
|
cacheLife({ revalidate: 0 })
|
|
|
|
return new Date().toISOString()
|
|
}
|
|
|
|
async function lowExpire() {
|
|
'use cache: remote'
|
|
cacheLife({ expire: 5 })
|
|
|
|
return new Date().toISOString()
|
|
}
|
|
|
|
async function OuterCacheNoExplicit() {
|
|
'use cache: remote'
|
|
// No explicit cacheLife - this would error during prerendering, but is
|
|
// allowed at request time (after connection()).
|
|
|
|
return (
|
|
<>
|
|
<p>
|
|
<code>revalidate=0</code>:{' '}
|
|
<span id="revalidate-zero">{await revalidateZero()}</span>
|
|
</p>
|
|
<p>
|
|
<code>expire=5</code>: <span id="low-expire">{await lowExpire()}</span>
|
|
</p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
async function OuterCacheExplicitShort() {
|
|
'use cache: remote'
|
|
// Explicit short cacheLife - excluded from prerender, becomes a dynamic hole.
|
|
cacheLife({ revalidate: 0, expire: 5 })
|
|
|
|
return (
|
|
<>
|
|
<p>
|
|
Explicit <code>revalidate=0</code>:{' '}
|
|
<span id="explicit-revalidate-zero">{await revalidateZero()}</span>
|
|
</p>
|
|
<p>
|
|
Explicit <code>expire=5</code>:{' '}
|
|
<span id="explicit-low-expire">{await lowExpire()}</span>
|
|
</p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
async function OuterCacheExplicitLong() {
|
|
'use cache: remote'
|
|
// Explicit long cacheLife - included in prerender despite short-lived inner
|
|
// caches.
|
|
cacheLife('default')
|
|
|
|
return (
|
|
<>
|
|
<p>
|
|
Explicit long (<code>revalidate=0</code> inner):{' '}
|
|
<span id="explicit-long-revalidate-zero">{await revalidateZero()}</span>
|
|
</p>
|
|
<p>
|
|
Explicit long (<code>expire=5</code> inner):{' '}
|
|
<span id="explicit-long-low-expire">{await lowExpire()}</span>
|
|
</p>
|
|
</>
|
|
)
|
|
}
|
|
|
|
async function Dynamic() {
|
|
await connection()
|
|
|
|
return <OuterCacheNoExplicit />
|
|
}
|
|
|
|
export default async function Page() {
|
|
return (
|
|
<>
|
|
<p id="static">Static content</p>
|
|
<Suspense fallback={<p id="dynamic">Loading...</p>}>
|
|
<Dynamic />
|
|
</Suspense>
|
|
<Suspense fallback={<p>Loading explicit short...</p>}>
|
|
<OuterCacheExplicitShort />
|
|
</Suspense>
|
|
<OuterCacheExplicitLong />
|
|
</>
|
|
)
|
|
}
|