Cache Components est un modèle Next.js 16 permettant d'opter pour le cache des composants individuels en utilisant la directive "use cache" ainsi que les primitives cacheLife et cacheTag, ce qui permet un contrôle de cache granulaire.
Activé avec cacheComponents: true dans next.config.ts, le modèle permet aux développeurs de marquer des composants serveur spécifiques ou des fonctions de récupération de données comme étant cacheables :
async function getProduct(slug: string) {
"use cache";
cacheLife("hours");
cacheTag(`product:${slug}`);
return db.query.products.findFirst({ where: { slug } });
}L'invalidation du cache se fait par le biais des tags : appeler revalidateTag("product:leather-bag") invalide chaque entrée mise en cache avec ce tag, peu importe où dans l'application elle a été mise en cache. Cela s'associe bien avec les services de mutation qui savent déjà quelles entités elles touchent.
Pour le commerce électronique, Cache Components résout la tension de longue date entre "cacher tout pour la vitesse" et "montrer des données fraîches pour l'exactitude." Le contenu du catalogue est mis en cache de manière agressive (heures à jours), tandis que le contenu spécifique à l'utilisateur (panier, récemment consulté) est calculé par requête. PPR compose ces éléments en une seule réponse cohérente.