Cache Components es un modelo de Next.js 16 para optar por componentes individuales en la caché utilizando la directiva "use cache" junto con las primitivas cacheLife y cacheTag, lo que permite un control de caché detallado.
Habilitado con cacheComponents: true en next.config.ts, el modelo permite a los desarrolladores marcar componentes de servidor específicos o funciones de obtención de datos como cacheables:
async function getProduct(slug: string) {
"use cache";
cacheLife("hours");
cacheTag(`product:${slug}`);
return db.query.products.findFirst({ where: { slug } });
}La invalidación de caché se realiza a través de etiquetas: llamar a revalidateTag("product:leather-bag") invalida cada entrada en caché etiquetada con esa etiqueta, independientemente de dónde se haya almacenado en la aplicación. Esto se complementa bien con los servicios de mutación que ya saben qué entidades tocan.
Para el comercio electrónico, Cache Components resuelve la tensión de larga data entre "caché todo por velocidad" y "muestra datos frescos por precisión." El contenido del catálogo se almacena en caché de manera agresiva (de horas a días), mientras que el contenido específico del usuario (carrito, recientemente visto) se calcula por solicitud. PPR compone estos en una única respuesta coherente.