iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
In Next.js 16, enable cacheComponents: true to use Cache Components; Partial Prerendering (PPR) is the resulting rendering model, not a separate setting to turn on. Next.js prepares a static shell ahead of requests, includes work that can be safely reused, and streams request-time content into the response behind Suspense boundaries. The engineering decision is which work belongs in each part—not whether PPR guarantees a faster route.
How PPR works with Cache Components
A PPR page combines output prepared before a request with content that must be generated at request time. With Cache Components enabled, eligible content forms a prerendered shell. Where dynamic work is still pending, the shell contains a Suspense fallback; the actual content streams when ready. Independent dynamic sections can resolve in parallel, so one section need not hold up the rest of the page.
- Static shell: HTML and serialized navigation data for parts that can be prerendered.
- Deferred work: Request-time content held behind a Suspense boundary, with its fallback included in the shell.
- Cache decision: Work suitable for reuse can be cached; work requiring request-specific data or runtime freshness stays dynamic.
Enable Cache Components in Next.js 16
In the current Next.js 16 configuration, set cacheComponents in next.config.ts:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheComponents: true,
}
export default nextConfigWith this enabled, use use cache and related cache APIs for work whose results can be reused correctly. Place request-time work behind <Suspense fallback={...}> when the page should render its shell without waiting for that work. See the Next.js Partial Prerendering guide and Cache Components configuration reference for the current API details.
#1 Best Overall
Choose what to cache and what to defer
Make the choice per piece of work, based on correctness and the user’s need for fresh data. The mechanisms documented by Next.js lead to these practical trade-offs; actual latency, cache hit rates, and experience depend on the application and deployment.
| Decision | Cache or prerender | Defer behind Suspense |
|---|---|---|
| Freshness | A shared, reusable result is acceptable and its lifetime and invalidation are correct. | Request-specific or fresh runtime data is required. |
| Initial shell | The content can be included in prerendered output. | The fallback is in the shell; actual content arrives later. |
| Runtime work | May avoid repeating work on each request, depending on cache behavior. | Can add runtime latency, while allowing the rest of the page to render. |
| Engineering responsibility | Choose sound cache keys, lifetimes, and invalidation. | Design a useful fallback and place the boundary appropriately. |
1. Identify work that can be ready before a request
Look for pure computation, module imports, synchronous local reads, and data deliberately cached. Eligible output can become part of the shell. Treat cacheability as a correctness decision, not just a performance optimization: personalized output is safe to reuse only when cache keys and inputs preserve the distinctions that matter.
Rank #2
2. Put request-time work behind a nearby boundary
For uncached work or work that needs request data, use a Suspense boundary with a fallback that keeps the page understandable. Keep the boundary close to the dynamic section so unrelated content can remain in the shell. Separate boundaries can let independent dynamic sections resolve in parallel.
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Clear out junk files and repair common Windows errors3Scan for outdated or missing drivers - takes under a minute3. Inspect the output and exercise real request paths
Check the build output and page source to see what entered the prerendered shell. Then test representative requests for data freshness, personalization, and fallback behavior. Review error handling as well: a shell may arrive promptly even when a task the user needs is still waiting on a deferred section.
Prefetching and CDN caching need verification
For a PPR-enabled page, Next.js can prefetch the static shell while dynamic data streams when ready; invalidations can refresh associated prefetches. Consult the prefetching guide for how this behavior works.
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. Those are conditions to verify, not a guarantee that a CDN is configured correctly by default. Check the cache key and headers in the actual deployment, and confirm that personalized responses are not shared improperly. See the Next.js CDN caching guide.
Migrate older PPR guidance carefully
Older Next.js 15 material describes PPR as experimental, configured with experimental.ppr: 'incremental' and a route-segment experimental_ppr export. That is version-specific history, not the current Next.js 16 setup. Next.js 16 removed the old experimental PPR configuration as PPR was integrated into Cache Components; follow the Next.js 16 beta announcement and current configuration documentation instead.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →The older canary guide’s warning that the feature was experimental and not recommended for production applies to that canary-era guidance, not automatically to the current Cache Components approach. See the legacy canary PPR guide for that historical context.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Account for runtime and route-configuration changes
- Cache Components requires the Node.js runtime; the migration guide says the Edge Runtime is not supported.
- With Cache Components, route-segment settings such as
dynamic,revalidate, andfetchCacheare replaced by newer cache APIs, includinguse cacheandcacheLife. - Runtime fetching may add latency compared with serving prerendered content. PPR is a rendering option, not a promise of lower end-to-end time on every route.
Use the Cache Components migration guide when updating an existing application, especially if it relies on those route-segment settings.
Measure the route instead of assuming a speedup
Earlier shell delivery and parallel streaming can change when parts of a page become available, but they do not establish a fixed performance improvement. Measure representative routes and request patterns in your deployment. Include the time until important deferred content is usable, not just the arrival of the shell, and validate cache behavior alongside freshness and personalization.
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.
