Next.js 16.4: Cache Components Are Now the Recommended Default

Next.js 16.4 is the release where the Next.js team stops hedging on Cache Components. Starting with 16.4 they recommend it for every app, new create-next-app projects have it on by default, and it becomes the default in Next.js 17. It was published on October 6, 2026.

All figures below are the ones the Next.js team publishes in the official release notes: Next.js 16.4.

What are Cache Components?#

A suite of features that lets you mark parts of your component tree as cacheable. The release post compares 'use cache' to a component-level Cache-Control header. Next.js caches the UI in the browser during client navigations and, optionally, on the server during rendering or at build time. It replaces the implicit caching of earlier App Router versions.

async function Projects({ userId }) {
  'use cache';
  cacheLife('hours');
  // query and render
}

For the basics, see my post on Next.js use cache.

How do I turn it on?#

Two flags in next.config.ts:

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
};

export default nextConfig;

Cache Components first shipped without Partial Prefetching, but the team now treats it as part of the model.

What does ensureStatic do?#

One dynamic component can quietly make a page that should be static cost more. ensureStatic makes the build fail if dynamic content shows up.

export const ensureStatic = 'navigation';

You can set it on a page or a layout. Put it on the root layout to guarantee every navigation is static, then relax it in nested layouts where a page needs dynamic content. The post suggests it for ecommerce stores, marketing pages and blogs.

How do navigation() and prefetch() work?#

<Link prefetch> can load a whole page's cached data early, which gets costly when every visible link does it. The new navigation() API lets you exclude cached content from a prefetch until a real navigation happens:

import { navigation } from 'next/cache';

async function Thread({ id }) {
  await navigation();
  const thread = await getThread(id);
  // render the thread
}

The post's example is an email app: prefetch only the first message and defer the thread. prefetch() does the same for content that would otherwise be in a route's shell, deferring it until an explicit prefetch.

What is new for agents and upgrades?#

• npx next@canary upgrade --agent=latest prepares guides, codemods and verification steps for your coding agent.
• experimental.agentUpgrade nudges you during next dev and next build. The default policy is 'security'; 'latest' and false are the other options.
• experimental.agentFeedback: true lets an agent draft reports for you to review before anything is sent. It needs telemetry enabled and does not run in CI.

There are also Skills for adopting Cache Components and Partial Prefetching. If you are moving an older project, Next.js middleware to proxy is another migration worth doing in the same pass.

What improved for every app?#

• Turbopack disk cache uses 20-25% less space (Zstandard for bulk data, LZ4 for metadata).
• Lazy server HMR updates other routes only when requested.
• A shared Turbopack runtime chunk, shorter production CSS Module class names and export mangling shrink bundles.
• React 19.3 ships with stable View Transitions, Fragment Refs and a new browser() API. See React view transitions.

The 30% memory and 15% compile-time figures belong to the experimental Rust React Compiler (turbopackRustReactCompiler), not the default setup.

Experimental flags in 16.4#

turbopackGc, turbopackLazyDynamicImports, turbopackPluginRuntimeStrategy: 'workerThreads' and turbopackAdditionalRoots are all opt-in. On Node.js 24.13.1 and newer, worker threads currently fall back to child processes because of a Node.js bug.

How should I prepare for Next.js 17?#

The Next.js team says Cache Components will become the default in Next.js 17, so the safest path is to turn them on now while they are still opt-in on existing apps. Keep experimental flags out of production until they are stable, since they can change between releases. If you are on the 16.4 line, also apply the Next.js 16.4.5 security update.

Key takeaways#

• Cache Components are now recommended for every app and default in new projects.
• Enable cacheComponents and partialPrefetching.
• Use ensureStatic to keep static pages static.
• Use navigation() and prefetch() to control prefetch cost.
• Try npx next@canary upgrade --agent=latest for upgrades.