cacheComponents

Cache Components enables component and function-level caching using the use cache directive. Data fetching is dynamic by default, and you choose what to cache at the page, component, or function level. Next.js prerenders a static HTML shell that is served immediately while dynamic content streams in when ready, letting you mix static and dynamic content within a single route.
To enable the cacheComponents flag, set it to true in your next.config.ts file, together with partialPrefetching:
Set partialPrefetching explicitly. Leaving it unset logs a warning, because the first release of Cache Components did not include Partial Prefetching. Set it to false only while migrating an app that adopted Cache Components before Partial Prefetching. Both features will be enabled everywhere in the next major release, and the options will be removed.
Cache Components requires the Node.js runtime and does not support the runtime route segment config. Remove any runtime export, including runtime = 'nodejs' and the deprecated runtime = 'edge'. Other server-side JavaScript runtimes are not guaranteed to work. See Migrating to Cache Components.
When cacheComponents is enabled, you can use the following cache functions and configurations:
If you used experimental.useCache or experimental.dynamicIO, migrate using the Version 16 upgrade guide. To migrate route segment configs and other caching patterns, see Migrating to Cache Components.
Additionally, cacheComponents implements Partial Prerendering (PPR) as the default behavior in the App Router. This means the experimental.ppr configuration flag and the experimental_ppr route segment configuration are no longer necessary and have been removed.
Read Prerendering for how the static shell and streaming fit together.
If you used experimental PPR in Next.js 15, refer to the Partial Prerendering (PPR) section of the Version 16 upgrade guide when migrating.
When cacheComponents is enabled, Next.js uses React's <Activity> component to preserve component state during client-side navigation.
Rather than unmounting the previous route when you navigate away, Next.js sets the Activity mode to "hidden". This means:
This behavior improves the navigation experience by maintaining UI state (form inputs, or expanded sections) when users navigate back and forth between routes.
Next.js uses heuristics to keep a few recently visited routes "hidden", while older routes are removed from the DOM to prevent excessive growth.
Some UI patterns behave differently when components stay mounted instead of unmounting. See the Preserving UI state guide for handling common patterns like dropdowns, dialogs, and testing.
Last updated October 15, 2026
Subscribe to our newsletter
Stay updated on new releases and features, guides, and case studies.