Cache Components is a Next.js 16 model for opting individual components into caching using the "use cache" directive plus cacheLife and cacheTag primitives, enabling fine-grained cache control.
Enabled with cacheComponents: true in next.config.ts, the model lets developers mark specific server components or data-fetching functions as cacheable:
async function getProduct(slug: string) {
"use cache";
cacheLife("hours");
cacheTag(`product:${slug}`);
return db.query.products.findFirst({ where: { slug } });
}Cache invalidation runs through tags: calling revalidateTag("product:leather-bag") invalidates every cached entry tagged with that tag, regardless of where in the app it was cached. This pairs well with mutation services that already know which entities they touch.
For ecommerce, Cache Components solves the long-standing tension between "cache everything for speed" and "show fresh data for accuracy." Catalog content is cached aggressively (hours to days), while user-specific content (cart, recently viewed) is computed per request. PPR composes these into a single coherent response.