What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Next.js caching depends on the version and cache model your app uses. In the older Next.js 15 App Router model, four separate mechanisms handle request deduplication, persistent data, rendered routes and client-side navigation. In Next.js 16, the opt-in Cache Components model makes caching more explicit: enable it, mark code with use cache, and set its lifetime with cacheLife. For either model, choose time-based freshness or invalidate entries when data changes; those are different controls.
Which Next.js cache model applies to your app?
Start with your installed Next.js version and configuration. The Next.js 15 guide describes the earlier App Router cache model, while the current documentation presents Cache Components as a Next.js 16 feature. Do not assume a Next.js 15 app uses the new model, or that Next.js 16 behavior is simply the old defaults with new names.
As an Amazon Associate I earn from qualifying purchases.
| Model | How caching is controlled | What to check |
|---|---|---|
| Next.js 15 App Router model | Separate mechanisms govern request memoization, the Data Cache, the Full Route Cache and the client Router Cache. Fetch options and route behavior influence caching. | Use the documentation for your app’s version: Next.js 15 caching guide. |
| Next.js 16 Cache Components | Opt in with cacheComponents: true, mark cacheable code with use cache, and set its lifetime with cacheLife. Tags and paths provide on-demand invalidation. |
Check the current Cache Components configuration and migration guide. |
The Next.js 15 guide described caching as much as possible by default, including behavior connected to static rendering and cached fetches. With Cache Components enabled, runtime fetching is the default unless code is explicitly cached. That difference matters when migrating: pages are dynamic by default under the new model, and uncached or runtime data access that is not handled as expected can produce development or build errors.
Recommended Free Tools
What the four older App Router cache layers do
The Next.js 15 guide describes four mechanisms with different scopes. They are not interchangeable, and clearing or changing one does not mean every other layer has the same behavior.
#1 Best Overall
| Mechanism | Where it operates | Purpose |
|---|---|---|
| Request memoization | Server, within a request | Avoids repeating equivalent work during that request. It is not a persistent cache across separate requests. |
| Data Cache | Server, persistent and revalidatable | Stores data such as cached fetch results so they can be reused and revalidated. |
| Full Route Cache | Server | Stores rendered route output, including HTML and the React Server Component payload. |
| Router Cache | Client | Stores React Server Component payloads used for client-side navigation. |
This separation helps diagnose stale content. A route’s rendered output, an underlying data entry and a browser’s navigation payload have distinct roles. For the version-specific mechanics, consult the Next.js 15 caching guide.
How Cache Components make caching explicit
In the current model, enable Cache Components in next.config.ts, then place use cache at a function, component or file boundary whose output should be cached. A cacheLife call inside that boundary selects its lifetime. The following is a minimal illustrative pattern for a cached data function:
Rank #2
import { cacheLife, cacheTag } from 'next/cache'
async function getArticle(id: string) {
'use cache'
cacheLife('hours')
cacheTag(`article-${id}`)
return getArticleFromDatabase(id)
}The directive marks the boundary; the lifetime and tag answer separate questions. cacheLife determines time-based freshness behavior, while cacheTag gives related cached output a label that can later be invalidated. The current reference allows built-in lifetime names, custom profiles configured in Next.js, or an inline object, and specifies that only one cacheLife call should execute in a single invocation. See the use cache reference and cacheLife reference.
The current use cache reference lists defaults of five minutes for client-side staleness, fifteen minutes before server-side revalidation, and no time-based expiration. These are documented defaults for the current model, not permanent guarantees; check the reference for the Next.js version you deploy. The stale setting controls client Router Cache behavior, not the HTTP Cache-Control: max-age header. The same reference documents a 30-second minimum for client-side stale timing to keep prefetched links usable.
How to choose a cache lifetime or invalidation strategy
Use a time-based lifetime when a defined interval is an acceptable freshness window. Use on-demand invalidation when an event—such as a successful content update—should mark related cached output for refresh. A tag can cover related entries; a path targets a route. A system can use a longer cache lifetime for content that changes infrequently and invalidate it when an update arrives, rather than relying only on frequent expiration.
| Need | Approach | What it means |
|---|---|---|
| Data can be a little out of date for a known interval | Set a cacheLife profile in Cache Components, or use the version-appropriate time-based mechanism in the older model. |
Freshness is governed by elapsed time; the appropriate interval depends on the content and API profile. |
| A known update should affect related cached results | Tag cacheable output with cacheTag; use revalidateTag or updateTag for the relevant tag. |
Invalidation follows the data relationship rather than waiting only for a timer. |
| A particular route should be refreshed | Use revalidatePath for the relevant path. |
The target is a route path rather than every entry sharing a data tag. |
In the older Next.js 15 model, a cached fetch could specify next.revalidate in seconds. After that interval, a request could receive stale data while Next.js refreshed it in the background; if refreshing failed, the previous cached value was retained. Do not transplant that behavior onto a Cache Components configuration without checking the current API. The older behavior is documented in the Next.js 15 caching guide.
What tag revalidation does in the current model
For current Cache Components code, tag a cached result with cacheTag, then choose the invalidation behavior that fits the update flow. The current revalidateTag reference documents revalidateTag('tag', 'max') as marking matching entries stale for stale-while-revalidate behavior. A subsequent request can use stale content while the cache refreshes. The older one-argument form is deprecated and expires entries immediately, so the next request must revalidate on a cache miss rather than relying on the documented stale-while-revalidate profile.
import { revalidateTag } from 'next/cache'
revalidateTag('articles', 'max')Use the tag that was attached to the cached output, and choose a profile with the freshness behavior you intend. For the immediate-expiration behavior associated with the older one-argument call, do not mistake it for the recommended current stale-while-revalidate form. The revalidateTag reference and revalidation guide describe the current options and context.
What changes when migrating to Cache Components?
A migration changes the model, not just the spelling of a cache option. The current migration guide says route segment settings such as dynamic, revalidate and fetchCache are replaced by use cache and cacheLife with Cache Components. Since pages are dynamic by default under the new model, identify which work should be cached and mark those boundaries explicitly. Review code that reads runtime or uncached data: unhandled access can be reported during development or a build.
- Confirm the target Next.js version and read its matching caching documentation.
- Enable
cacheComponents: trueonly when using the Cache Components model. - Identify the functions, components or files whose output is safe to reuse, and mark those boundaries with
use cache. - Choose a lifetime with
cacheLife, then add tags or path invalidation where known updates must refresh cached results. - Run the application’s development and build workflows and resolve any uncached runtime-data access the new model reports.
The official migration guide is the reference for a specific version transition; do not assume old route-segment settings continue to control Cache Components behavior in the same way.
Runtime and deployment considerations
Current Cache Components documentation requires the Node.js runtime and says Edge Runtime is unsupported. Adapter behavior and cache persistence can also vary by deployment platform, so verify that the platform and adapter you use support the model and persistence needs of your application. The Cache Components and partial prerendering guide covers the runtime requirement; platform-specific persistence is not established by the framework documentation alone.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
