How caching works with Cache Components
With Cache Components, data fetching is dynamic by default and the developer decides what to cache at page, component or function level. The "use cache" directive caches the return value of async functions (data level) or of whole components, layouts and pages (UI level). At the top of a file, it caches every exported function in that file.
Keys. Function arguments and variables captured from outer scopes become part of the key automatically, so different inputs get separate entries.
Deploys. The build ID is part of every cache key, so a new build or deploy invalidates all
"use cache"entries.Inputs and outputs. Arguments and return values of cached functions must be serializable.
Storage. The default cache handler keeps entries in an in-memory LRU store;
"use cache: remote"lets a platform plug in a shared store such as Redis or a KV database.
The Next.js caching guide has code for each level; our Next.js performance optimization guide covers rendering strategies and CDN setup alongside other speed fixes.
Lifetimes, invalidation and versions
Lifetimes.
cacheLifetakes a preset profile (seconds,minutes,hours,days,weeks,max) or a custom object withstale,revalidateandexpirevalues. Without acacheLifecall, the default profile revalidates on the server every 15 minutes.Tags.
cacheTaglabels entries with string tags so they can be invalidated on demand without touching other cached data.Immediate expiry.
updateTag, added in Next.js 16, works only inside Server Actions and expires a tag at once, so the next read waits for fresh data (read-your-writes).Background refresh. Since Next.js 16,
revalidateTagtakes acacheLifeprofile as its second argument for stale-while-revalidate behavior;'max'is the recommended value.
Versions. Next.js 15 stopped caching fetch requests, GET Route Handlers and client navigations unless you opt in. Next.js 16.0.0 made cacheComponents a stable top-level option, replacing the experimental ppr, useCache and dynamicIO flags. In the previous model, fetch requests are uncached by default and opt in per request with cache: 'force-cache'; unstable_cache covers non-fetch functions. See also the pros and cons of Next.js.
A caching check Pagepro runs before launch
Listing and index pages can miss revalidation that works on detail pages. Before launch, Pagepro verifies that revalidation covers listing and index routes too. The test copies what an editor does: publish, then load the listing. For a performance review of a live Next.js site, see Next.js performance optimization.
Sources
- Caching (Cache Components)Next.js · nextjs.org
- Next.js 16 (release blog post)Next.js · nextjs.org
- next.config.js: cacheComponentsNext.js · nextjs.org
- Directives: use cacheNext.js · nextjs.org
- Functions: cacheLifeNext.js · nextjs.org
- Functions: cacheTagNext.js · nextjs.org
- Functions: updateTagNext.js · nextjs.org
- Next.js 15Next.js · nextjs.org
- Caching (Previous Model)Next.js · nextjs.org