In Next.js 16, Partial Prerendering (PPR) is enabled through cacheComponents: true. It lets a route serve a prerendered shell while request-dependent sections render behind Suspense boundaries and stream in when ready. The key engineering decision is what can be safely reused, what must remain fresh, and where a useful fallback belongs.
How Partial Prerendering works
PPR combines output prepared before a request with work that runs at request time. With Cache Components enabled, Next.js can put eligible content into a static shell: HTML and serialized navigation data generated ahead of the request. Work that cannot be completed for that shell can be deferred behind a Suspense boundary. The fallback is part of the shell; the actual content is sent when the deferred work resolves.
As an Amazon Associate I earn from qualifying purchases.
This allows independent dynamic sections to resolve in parallel rather than holding the entire page behind its slowest request. It does not make the deferred work itself faster, and it does not guarantee a faster end-to-end experience for every route.
Free tools Windows power users keep installed
One-click scans. No signup required.
How to enable PPR in Next.js 16
Use the current Cache Components configuration in next.config.ts:
#1 Best Overall
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheComponents: true,
}
export default nextConfigWith this option enabled, Next.js 16 uses PPR as its rendering behavior. For current configuration details, see the Next.js Cache Components configuration reference.
Do not carry forward the older experimental.ppr flag as current setup advice. Next.js 16 removed the old experimental PPR configuration as the capability was integrated into Cache Components, according to the Next.js 16 announcement. Older Next.js 15 and canary guides describe version-specific setup and status, not the current configuration.
Rank #2
Choose what belongs in the shell, cache, or request path
Make the decision per piece of work rather than labeling an entire route “static” or “dynamic.” A route can combine prerendered content, cached results, and uncached request-time content.
| Approach | When it fits | What the user receives initially | Engineering cost |
|---|---|---|---|
| Prerender or cache | Pure computation, local synchronous reads, or data that can be reused with a correct cache lifetime and invalidation policy. | The resulting content can be included in the shell. | Cache keys, lifetimes, and invalidation must preserve freshness and user-specific distinctions. |
| Defer behind Suspense | Request-specific data, work that must remain uncached, or data whose freshness requirement rules out reuse. | A fallback appears in the shell; the actual section arrives when its work completes. | Fallback design and boundary placement determine how useful the shell remains while work is pending. |
Use use cache and related cache APIs when sharing a result is correct. Cache keys include function arguments and closed-over values, so ensure the inputs distinguish results that must not be shared. The Next.js Partial Prerendering guide describes the shell, deferred work, and cache behavior.
For work that must run at request time, put the relevant component behind <Suspense fallback={...}>. Keep boundaries near the dynamic section so unrelated content can still be included in the shell; separate independent sections where doing so allows them to resolve independently.
Place boundaries around useful units of work
- Inventory route work. Separate work that can finish ahead of a request—such as pure computation, module imports, synchronous local reads, and deliberately cached data—from work that depends on request-time information.
- Set the reuse rule. For each data source, decide whether reuse is safe. Choose cache inputs and lifetimes that preserve the required distinctions and freshness; do not cache personalized results under keys that omit the relevant identity or context.
- Design the deferred section. Wrap uncached, request-dependent work in a Suspense boundary and provide a fallback that gives the reader useful context. Put the boundary close to the work that is waiting.
- Verify output and behavior. Inspect build output and page source to see what entered the prerendered shell. Exercise representative request paths, data freshness, personalization, and fallback behavior.
A shell can arrive promptly and still leave a user’s main task waiting on a deferred section. Review loading and error behavior as part of the route design, not as a cosmetic afterthought.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What changes when migrating to Cache Components
Cache Components changes more than the PPR switch. The migration guide says it requires the Node.js runtime and does not support Edge Runtime. It also replaces route-segment settings such as dynamic, revalidate, and fetchCache with the use cache and cacheLife model. See the Next.js migration guide for Cache Components before translating an existing route’s behavior.
In particular, do not assume that turning on the option alone preserves the intent of legacy route configuration. Map each route’s freshness, caching, and request-time requirements to the newer APIs, then verify the resulting output and behavior.
Streaming, prefetching, and CDN conditions
For a PPR-enabled page, Next.js can prefetch the static shell while dynamic data streams when ready. The prefetching guide also notes that invalidations can refresh associated prefetches; see Next.js prefetching.
A CDN can cache static prefetch responses for PPR-enabled routes when its cache key includes _rsc and it respects Next.js Cache-Control headers. That is a condition to validate, not a guarantee that an arbitrary CDN setup is safe. Check the deployed cache key, response headers, and personalization behavior against the Next.js CDN caching guide.
Measure the route, not the feature label
Next.js documentation explains how prerendered content can arrive in the shell and how deferred sections can stream independently, but it does not establish a workload-independent speedup. Runtime fetching can add latency compared with serving prerendered content. Measure representative routes and request patterns in the actual deployment, including the shell, deferred sections, cache behavior, and the time users must wait for the content they need.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →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.
