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

Next.js 16.4 recommends Cache Components for every app, turns them on in new projects and adds ensureStatic, navigation() and prefetch(). Here is what is new and which flags to set.

By Waseem Anjum · Published 2026-11-13 · https://fabwaseem.com/blog/nextjs-16-4-cache-components-guide

> **TL;DR:** Next.js 16.4 (October 6, 2026) now recommends Cache Components for every app, enables them by default in new create-next-app projects, and says they will be the default in Next.js 17. It adds ensureStatic, navigation() and prefetch(), a next upgrade --agent command, smaller Turbopack output and React 19.3.

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](https://nextjs.org/blog/next-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.

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

For the basics, see my post on [Next.js use cache](https://fabwaseem.com/blog/nextjs-use-cache).

## How do I turn it on?

Two flags in `next.config.ts`:

```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.

![The three ensureStatic levels: shell, prefetch and navigation](https://res.cloudinary.com/wasicloudinary/image/upload/v1794543798/fabwaseem/projects/rxxae7mltjpdcp13flg4.jpg)

```tsx
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:

```tsx
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](https://fabwaseem.com/blog/nextjs-middleware-to-proxy) is another migration worth doing in the same pass.

## What improved for every app?

![Bar chart of 16.4 savings: disk cache 20 to 25 percent, Rust compiler memory 30 percent, compile time 15 percent](https://res.cloudinary.com/wasicloudinary/image/upload/v1794543796/fabwaseem/projects/yqhyahslvytzbt35iafv.jpg)

- 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](https://fabwaseem.com/blog/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](https://fabwaseem.com/blog/nextjs-16-4-5-security-release) 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.

## Questions

### What are Cache Components in Next.js?

A programming model where you mark parts of the component tree as cacheable with 'use cache'. The release post describes it as a component-level version of the Cache-Control HTTP header, and says it replaces the implicit caching of earlier App Router versions.

### How do I enable Cache Components?

Set cacheComponents: true and partialPrefetching: true in next.config.ts. New apps created with create-next-app have it enabled by default.

### What does ensureStatic do?

It makes the build fail if dynamic content appears in a route or layout. Values are 'shell', 'prefetch' or 'navigation', where 'navigation' is the strictest.

### Will Cache Components be the default in Next.js 17?

Yes. The Next.js team says Cache Components will become the default in Next.js 17, so enabling them on 16.4 now makes that upgrade easier.

### How do I upgrade with a coding agent?

Run npx next@canary upgrade --agent=latest from your app directory. It prepares migration guides, codemods and verification steps for your agent.