Cache Components ist ein Next.js 16-Modell, das es ermöglicht, einzelne Komponenten mithilfe der Direktive "use cache" sowie den Primitiven cacheLife und cacheTag in den Cache zu integrieren, was eine feinkörnige Cache-Kontrolle ermöglicht.
Aktiviert mit cacheComponents: true in next.config.ts, erlaubt das Modell Entwicklern, spezifische Serverkomponenten oder Datenabruf-Funktionen als cachebar zu kennzeichnen:
async function getProduct(slug: string) {
"use cache";
cacheLife("hours");
cacheTag(`product:${slug}`);
return db.query.products.findFirst({ where: { slug } });
}Die Cache-Invalidierung erfolgt über Tags: Der Aufruf von revalidateTag("product:leather-bag") invalidiert jeden gecachten Eintrag, der mit diesem Tag versehen ist, unabhängig davon, wo in der App er gecacht wurde. Dies passt gut zu Mutationsdiensten, die bereits wissen, welche Entitäten sie berühren.
Für den E-Commerce löst Cache Components die langjährige Spannung zwischen "alles für Geschwindigkeit cachen" und "frische Daten für Genauigkeit anzeigen." Kataloginhalte werden aggressiv gecacht (Stunden bis Tage), während benutzerspezifische Inhalte (Warenkorb, zuletzt angesehen) pro Anfrage berechnet werden. PPR kombiniert diese in eine einzige kohärente Antwort.