Next.js представил Composable Caching – новый подход к кэшированию, который упрощает управление кэшем на разных уровнях приложения, от данных до компонентов и страниц.

---

Главные нововведения

1️⃣ Единая модель кэширования

Next.js теперь использует единую модель кэширования для всего приложения:

• fetch() – кэширует запросы к API.
• rendering (отрисовка) – кэширует компоненты и страницы.
• revalidateTag() / revalidatePath() – позволяет управлять кэшем точечно.

2️⃣ Гибкое управление кэшем

Можно настраивать кэширование в зависимости от требований:

• force-cache – жесткое кэширование (аналог SSG).
• no-store – отключение кэша (аналог SSR).
• revalidate: X – автоматическое обновление через X секунд (аналог ISR).

3️⃣ Новая стратегия revalidateTag()

Теперь можно обновлять кэш выборочно:

• Группировка кэша по тегам.
• Легкое обновление конкретных данных без затрагивания других частей страницы.

Пример:

import { revalidateTag } from 'next/cache';

async function updateData() {
    await fetch('/api/update', { method: 'POST' });
    revalidateTag('products'); // Обновит только кэш данных с тегом "products"
}

4️⃣ Кэширование на сервере и клиенте

• кэш можно использовать внутри компонентов React.
• Поддерживаются Edge Runtime, Vercel, Self-Hosting.

5️⃣ Интеграция с next/image и next/font

Next.js использует ту же модель кэширования для изображений и шрифтов, что делает их загрузку быстрее.

---

Вывод

• Composable Caching даёт контроль над кэшем на разных уровнях.
• Теги кэша позволяют обновлять данные гибко и без лишних ререндеров.
• Улучшена поддержка кэша на сервере и клиентах.

Итог: производительность выросла, управление кэшем стало проще!

---

Автор оригинального поста: Lee Robinson