next-cache-components
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
By vercel-labs · 1,250 installs
npx skills add vercel-labs/openreview --skill next-cache-components
Source repository · Upstream listing
Cache Components (Next.js 16+)
Cache Components enable Partial Prerendering (PPR) mix static, cached, and dynamic content in a single route.
Enable Cache Components
This replaces the old experimental.ppr flag.
Three Content Types
With Cache Components enabled, content falls into three categories:
1. Static (Auto Prerendered)
Synchronous code, imports, pure computations prerendered at build time:
2. Cached ( use cache )
Async data that doesn't need fresh fetches every request:
3. Dynamic (Suspense)
Runtime data that must be fresh wrap in Suspense:
use cache Directive
File Level
Component Level
Function Level
Cache Profiles
Built in Profiles
cacheLife() Custom Lifetime
Built in profiles: 'default' , 'minutes' , 'hours' , 'days' , 'weeks' , 'max'
Inline Configuration
Cache Invalidation
cacheTag() Tag Cached Content
updateTag() Immediate Invalidation
Use when you need the cache refreshed within the same request:
revalidateTag() Background Revalidation
Use for stale while revalidate behavior:
Runtime Data Constraint
Cannot access cookies() , headers() , or searchParams inside use cache .
Solution: Pass as Arguments
Exception: use cache: private
For compliance requirements when you can't refactor:
Cache Key Generation
Cache keys are automatic based on:
Build ID invalidates all caches on deploy
Function ID hash of function location
Serializable arguments props become part of key
Closure variables outer scope values included
Complete Example
Migration from Previous Versions
Old Config Replacement
experimental.ppr cacheComponents: true
dynamic = 'force dynamic' Remove (default behavior)
dynamic = 'force static' 'use cache' + cacheLife('max')
revalidate = N cacheLife({ revalidate: N })
unstable cache() 'use cache' directive
Migrating unstable cache to use cache
unstable cache has been replaced by the use cache directive in Next.js 16. When cacheComponents is enabled, convert unstable cache calls to use cache functions:
Before ( unstable cache ):
After ( use cache ):
Key differences:
No manual cache keys use cache generates keys automatically from function arguments and closures. The keyParts array from unstable cache is no longer needed.
Tags Replace options.tags with cacheTag() calls inside the function.
Revalidation Replace options.revalidate with cacheLife({ revalidate: N }) or a built in profile like cacheLife('minutes') .
Dynamic data unstable cache did not support cookies() or headers() inside the callback. The same restriction applies to use cache , but you can use 'use cache: private' if needed.
Limitations
Edge runtime not supported requires Node.js
Static export not supported needs server
Non deterministic values ( Math.random() , Date.now() ) execute once at build time inside use cache
For request time randomness outside cache:
Sources:
[Cache Components Guide](https://nextjs.org/docs/app/getting started/cache components)
[use cache Directive](https://nextjs.org/docs/app/api reference/directives/use cache)
[unstable cache (legacy)](https://nextjs.org/docs/app/api reference/functions/unstable cache)