Topics

Notes sur le composant Cache de Next.js 16

  • column

Cela s'est produit il y a environ six mois, mais Next.js 16 a été officiellement publié le 21 octobre 2025.

Le concept de composants de cache a été introduit dans Next.js 16, permettant un contrôle explicite de la mise en cache.

use cacheSeul l'emplacement où la directive est écrite est mis en cache.<Sunpense>Cela permet également la mise en cache au niveau des composants.

Puisque j'écris un article à ce sujet, je vais résumer comment utiliser les « composants de cache » de Next.js 16, comme un pense-bête pour moi-même !

Quatre caches dans Next.js AppRouter

Next.js AppRouter propose les quatre types de mise en cache suivants :

  • Request Memoization:Cela permet d'éliminer les requêtes en double. Même si la même fonction de récupération est appelée dans différents composants, elle ne sera exécutée qu'une seule fois. Next.js gère cette fonctionnalité automatiquement.
  • Data CacheL'option `fetch` manipule l'implémentation du cache.
  • Full Route Cache:Mise en cache au niveau de la page compatible avec le rendu statique (SSG, ISR). Mécanisme de mise en cache côté serveur utilisant les données RSC et le HTML.
  • Router Cache:Ce mécanisme met temporairement en cache uniquement la charge utile RSC dans la mémoire du client. Il fonctionne grâce au composant de Next.js.

Nouvelles fonctionnalités de Next.js 16"use cache"

Que pouvez-vous faire avec la nouvelle fonctionnalité Composants de cache ?

  • use cacheUtilisez ceci pour simplifier les paramètres du cache.use cacheSeul l'emplacement où le code a été écrit est mis en cache, et ce cache peut désormais être contrôlé explicitement.
  • <Suspense>En encadrant les composants dans une balise `