Cache Components — это модель Next.js 16 для выбора отдельных компонентов для кэширования с использованием директивы "use cache" и примитивов cacheLife и cacheTag, что позволяет осуществлять тонкую настройку кэширования.
Включенная с помощью cacheComponents: true в next.config.ts, модель позволяет разработчикам помечать конкретные серверные компоненты или функции получения данных как кэшируемые:
async function getProduct(slug: string) {
"use cache";
cacheLife("hours");
cacheTag(`product:${slug}`);
return db.query.products.findFirst({ where: { slug } });
}Инвалидация кэша происходит через теги: вызов revalidateTag("product:leather-bag") аннулирует каждую кэшированную запись, помеченную этим тегом, независимо от того, где в приложении она была закэширована. Это хорошо сочетается с сервисами мутаций, которые уже знают, какие сущности они затрагивают.
Для электронной коммерции Cache Components решает давнюю проблему между "кэшировать все для скорости" и "показывать свежие данные для точности." Контент каталога кэшируется агрессивно (от часов до дней), в то время как контент, специфичный для пользователя (корзина, недавно просмотренные), вычисляется по запросу. PPR объединяет это в единый согласованный ответ.