Next.js App Router Best Practices

Chapter 2 · Practice 1 of 6

Turn on Cache Components and Partial Prefetching

From Caching with Cache Components

Why it matters

Cache Components is the current Next.js programming model, and from Next.js 16.4 the team recommends it for every app. In this model nothing is cached unless you say so, and every route gets a static shell that streams dynamic parts behind Suspense.

ProjectWhat to do
New, from create-next-appAlready on by default
Existing appSet cacheComponents: true and partialPrefetching: true in your config

The docs say to set partialPrefetching explicitly, since leaving it unset logs a warning. Both settings are planned to become the default in the next major release, so turning them on now saves a migration later.

Example

TypeScript
// next.config.ts
import type { NextConfig } from 'next';

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

export default nextConfig;