'use cache' et Cache Components (Next.js)

Définition

Directive Next.js (expérimentale en 15, activée par cacheComponents: true depuis Next.js 16, 21 octobre 2025) qui rend cachable une page, un composant ou une fonction async. La clé de cache est dérivée automatiquement par le compilateur (ID de build, ID de fonction, arguments et variables capturées). Tout ce qui n'est pas marqué est dynamique par défaut : le cache implicite de l'ancien App Router disparaît. Les portées 'use cache' constituent la coquille statique du Partial Prerendering.

Analogie

Un plat cuisiné sous vide : préparé une fois, réchauffé à chaque service tant que la date (cacheLife) n'est pas dépassée.

Exemple de code

// next.config.ts
export default { cacheComponents: true };

// lib/data.ts
import { cacheLife, cacheTag } from 'next/cache';
export async function getProducts(category: string) {
  'use cache';
  cacheLife('hours');            // durée explicite recommandée
  cacheTag('products');          // invalidation ciblée
  return db.products.findMany({ where: { category } });
}
// Composant entier cachable (doit être async)
export async function Footer() { 'use cache'; return <footer>…</footer>; }

Cas d'usage

Mettre en cache des requêtes BDD ou des blocs de page coûteux tout en gardant le reste dynamique, avec navigation instantanée côté client.

Anti-pattern

Termes liés

Sources

• nextjs.org/blog/next-16
• nextjs.org/docs/app/api-reference/directives/use-cache