Cache Components é um modelo do Next.js 16 para optar por componentes individuais em cache usando a diretiva "use cache" mais as primitivas cacheLife e cacheTag, permitindo um controle de cache mais granular.
Habilitado com cacheComponents: true em next.config.ts, o modelo permite que os desenvolvedores marquem componentes de servidor específicos ou funções de busca de dados como cacheáveis:
async function getProduct(slug: string) {
"use cache";
cacheLife("hours");
cacheTag(`product:${slug}`);
return db.query.products.findFirst({ where: { slug } });
}A invalidação de cache ocorre através de tags: chamar revalidateTag("product:leather-bag") invalida cada entrada em cache marcada com essa tag, independentemente de onde no aplicativo foi armazenada. Isso combina bem com serviços de mutação que já sabem quais entidades tocam.
Para e-commerce, Cache Components resolve a tensão de longa data entre "cache tudo para velocidade" e "mostrar dados frescos para precisão." O conteúdo do catálogo é armazenado em cache de forma agressiva (horas a dias), enquanto o conteúdo específico do usuário (carrinho, recentemente visualizado) é computado por solicitação. O PPR compõe isso em uma única resposta coerente.