Présentation du nouveau modèle

Next.js 16.4, publié le 6 octobre 2026, marque le passage officiel au modèle de programmation nommé Cache Components. Ce modèle, introduit initialement dans les versions 16.x, devient la configuration recommandée pour chaque nouvelle application créée avec create-next-app. La version inclut également React 19.3, une réduction de la consommation mémoire en développement, une diminution de la taille du disque et des temps de compilation plus courts.

Mécanisme des Cache Components

Les Cache Components permettent de marquer des parties de l’arbre de composants avec l’annotation 'use cache'. Cette annotation agit comme un équivalent de l’en‑tête HTTP Cache‑Control mais au niveau du composant. Le code suivant illustre l’usage :

import { cacheLife } from 'next/cache';
export default async function DashboardPage() {
  const currentUser = await getCurrentUser();
  return (
    

      
Welcome, {currentUser.name}

      }>
        
      
    

  );
}
async function Projects({ userId }) {
  'use cache';
  cacheLife('hours');
  const projects = await db.query.projects.findMany({
    where: eq(projectsTable.userId, userId),
  });
  return (
    
{projects.map(project => (
      
{project.name}

    ))}

  );
}

Lors du rendu, Next.js stocke le résultat du composant dans le navigateur pour les navigations client et, de façon optionnelle, sur le serveur. Le modèle reste composable : il est possible de combiner cache côté client, cache côté serveur et rendu à la demande dans une même page.

Outils de migration et garanties de staticité

Pour les projets existants, la commande next upgrade --agent fournit un guidage version‑spécifique et des « Skills » capables de refactoriser automatiquement le code afin d’adopter les Cache Components. Le fichier de configuration next.config.ts active le modèle via deux drapeaux :

import type { NextConfig } from 'next';
const nextConfig: NextConfig = {
  cacheComponents: true,
  partialPrefetching: true,
};
export default nextConfig;

Le drapeau partialPrefetching, introduit dans les versions précédentes, fait désormais partie intégrante du modèle. En outre, la fonction ensureStatic permet de contraindre la génération d’une route à rester entièrement statique. Exemple :

export const ensureStatic = 'navigation';
export default function Page() {
  return (
    <>
       {/* 🔴 Ce composant provoque une erreur de build */}
      
    
  );
}

En définissant ensureStatic à 'navigation', le processus de build échoue dès qu’un composant dynamique apparaît, garantissant que les navigations vers la route ne déclenchent aucun calcul serveur. Les valeurs 'prefetch' et 'shell' offrent des contrôles plus fins sur les pré‑chargements et les découvertes de routes.

Impacts sur les performances et la taille du bundle

La version 16.4 signale une réduction de la consommation mémoire en mode développement ainsi qu’une diminution de la taille du disque utilisé. Les temps de compilation sont également plus courts, ce qui accélère les cycles de développement. Les bundles de production bénéficient d’une taille moindre grâce à l’élimination du code lié aux anciens comportements de cache du App Router. Ces gains sont mesurés sans modification du code applicatif, simplement en activant le nouveau modèle via la configuration.