cacheComponents

Core Idea

cacheComponents (next.config.ts flag) enables component/function-level caching via use cache and makes data fetching dynamic-by-default, prerendering a static shell while dynamic parts stream in.

Key Concepts

• cacheComponents: boolean flag in next.config.ts that turns on Cache Components (use cache directive, cacheLife, cacheTag).
• Requires Node.js runtime: routes using the deprecated runtime = 'edge' export must migrate; other JS runtimes aren't guaranteed to work.
• Implements PPR by default: with cacheComponents on, Partial Prerendering is the default App Router behavior; experimental.ppr and experimental_ppr are removed/unnecessary.
• <Activity> navigation: when enabled, Next.js uses React's <Activity> to keep previous routes mounted (mode "hidden") instead of unmounting on navigation, preserving component state; effects clean up when hidden and recreate when visible.

Code Examples

import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  cacheComponents: true,
}

export default nextConfig

• O que demonstra: como habilitar Cache Components no next.config.ts.

Reference Tables

Version	Change
16.0.0	cacheComponents introduced; unifies ppr, useCache, dynamicIO flags.

Anti-patterns

• Manter runtime = 'edge': incompatível com cacheComponents, migre antes de habilitar.

Key Takeaways

1. Habilitar cacheComponents: true liga use cache, cacheLife, cacheTag e PPR de uma vez só.
2. Substitui experimental.useCache/experimental.dynamicIO do Next 15 (ver guia de upgrade da v16).
3. Preserva estado de UI entre navegações via <Activity>, o que pode exigir tratamento especial de dropdowns/dialogs (ver guia "Preserving UI state").
4. Next.js usa heurística para manter só algumas rotas recentes "hidden"; rotas mais antigas são removidas do DOM.

Connects To

• use cache directive: mecanismo de cache habilitado por esta flag.
• cacheLife / cacheTag: funções de configuração de cache usadas dentro de use cache.