Free tools Windows power users keep installed
One-click scans. No signup required.
In Next.js 16, enable current Partial Prerendering behavior by setting cacheComponents: true in your Next.js configuration. This is an application-level opt-in, not a per-page flag. To migrate safely, choose one route as your first validation target, cache reusable work with use cache, and defer request-dependent or uncached work behind narrow React Suspense boundaries.
What changes in Next.js 16
Next.js 16 uses Cache Components for the current prerendering model: a route can combine a prerendered HTML shell with request-time content that streams into designated parts of the page. The shell can include synchronous I/O, module imports, and pure computation that complete during prerendering. Work that cannot complete then must either be cached when reuse is appropriate or deferred to request time.
As an Amazon Associate I earn from qualifying purchases.
The current configuration is cacheComponents: true. Next.js 16 removed the experimental PPR flag and route-level configuration used in older canary examples. The older experimental.ppr: 'incremental' and experimental_ppr = true instructions describe that earlier model, not the Next.js 16 setup. If you are upgrading an app that already uses the Next.js 15 canary PPR implementation, follow the version-specific guidance in the Next.js 16 upgrade guide.
Cache Components first appeared in Next.js 16.0.0 and unifies the former ppr, useCache, and dynamicIO flags. It remains opt-in; once enabled, this is the current rendering model for routes in the app.
#1 Best Overall
Migrate one route first
- Confirm the framework version and rendering setup. Make sure you are following the Next.js 16 Cache Components guidance rather than a canary-era example. Note the target route and its current segment configuration before changing it.
- Enable Cache Components in
next.config.ts. AddcacheComponents: trueto the Next config. This enables the behavior for the application; the one-route-first approach means inspecting and validating one page before working through the rest of the app. - Inspect what the target route does during rendering. Identify data access, runtime APIs, uncached asynchronous work, and legacy route settings. In development or during a build, Next.js reports an
Uncached data was accessed outside of <Suspense>error when uncached work has not been handled. - Choose a handling strategy for each dynamic section. Use
use cachefor data or output that can be reused and does not require request-local context. Defer work that needs request-specific information, or must remain uncached and fresh, behind Suspense. - Keep Suspense boundaries close to the work they defer. Give each boundary a useful fallback. The fallback can be included in the static shell while the request-time result streams in; narrow boundaries preserve more prerendered content and let independent dynamic sections render in parallel.
- Review legacy segment settings. Translate or remove old
dynamic,revalidate, andfetchCacheconfiguration as appropriate; details are below. - Build and validate the deployment target. Inspect build output to confirm whether the route was fully prerendered or contains the intended dynamic holes. Check runtime compatibility and platform-specific PPR support before production deployment.
Choose between caching and request-time deferral
| Approach | Use it when | What it means for the page |
|---|---|---|
use cache with a deliberate cache lifetime or invalidation strategy |
The data or output is reusable and does not require request-local context. | Reusable output may be included in the shell or reused at runtime. Set a suitable lifetime with cacheLife or invalidate by tags when needed. |
| React Suspense deferral | The work needs request-time information or must remain uncached and fresh. | The fallback is part of the shell; the dynamic result streams at request time. Keep the boundary narrow and the fallback useful. |
Neither approach is universally faster or correct. Decide based on whether content must be personalized or fresh for every request, whether it needs request context, what fallback the page can show, and how much staleness or cache invalidation your application can accept.
Handle request-specific APIs in deferred subtrees
APIs such as cookies(), headers(), and request-specific searchParams require request context. Put their access in the dynamic subtree that needs them and wrap that subtree in Suspense, rather than allowing the request dependency to prevent the rest of the page from being prerendered.
Rank #2
Metadata and viewport reads are tracked separately from the page body. If they depend on uncached or runtime data, cache that data where appropriate or explicitly signal intentional deferred rendering; do not assume a Suspense boundary around page content alone resolves metadata or viewport access.
Revisit route segment configuration
With Cache Components enabled, the older dynamic, revalidate, and fetchCache route settings are replaced by newer cache behavior. The migration guidance recommends removing force-static first and then addressing resulting errors; force-dynamic is unnecessary. Use cacheLife in place of the route-level revalidate setting, and do not rely on fetchCache inside a use cache scope.
For a route-by-route conversion, use the official Cache Components migration guide to resolve the specific configuration and rendering errors surfaced by your app.
Verify runtime and deployment support
Cache Components requires the Node.js runtime and is not supported by the Edge Runtime. Check the cacheComponents configuration reference for the current requirements. If you self-host or deploy through a platform, review its PPR support and cache behavior as described in the Next.js self-hosting guide; do not assume that support is identical across deployment targets.
When testing client-side navigation, account for Next.js using React <Activity> with Cache Components to preserve state for recently visited routes. A route’s state may therefore behave differently from a test that only loads it directly.
Recommended Free Tools
What to expect from the performance model
Next.js describes Cache Components as a way to mix static, cached, and dynamic content in one route, combining the speed of static sites with dynamic rendering flexibility. That is the framework’s rationale for the feature, not a measured performance guarantee. No universal speedup follows from enabling it: results depend on what the route prerenders, what it defers, and the cache and deployment behavior in your app.
Quick 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.
