1️⃣ Request Memoization
— Что это: Кэширование результата функций (например, fetch, cookies(), headers() и т.п.) во время одного запроса.
— Где работает: Только на сервере, внутри одного HTTP-запроса.
— Зачем: Чтобы одна и та же функция не вызывалась многократно, если её результат не изменится в пределах одного запроса.
— Когда очищается: После завершения запроса.
💡 Пример: fetch() в компоненте вызывается несколько раз — результат будет взят из памяти, а не выполнен повторно.
2️⃣ Data Cache
— Что это: Кэш данных, полученных через fetch() (в app/ маршрутах).
— Где работает: На сервере (может быть глобальным).
— Зачем: Хранить данные между запросами пользователей и даже между деплойментами, если нужно.
— Управление: Через параметры fetch:
fetch(url, { next: { revalidate: 60 } }) // ISR-подобное поведение
fetch(url, { cache: 'no-store' }) // отключить кэш
3️⃣ Full Route Cache
— Что это: Кэш целых маршрутов — HTML + RSC (React Server Components) payload.
— Где работает: На сервере.
— Зачем: Ускорение маршрутизации и снижение нагрузки — отдаются заранее сгенерированные страницы.
— Обновление: Через revalidate или вручную (инвалидировать можно через API).
💡 Это как ISR (Incremental Static Regeneration), но для App Router.
4️⃣ Router Cache
— Что это: Кэш маршрутизатора React в браузере.
— Где работает: На клиенте.
— Зачем: При переключении между страницами в пределах SPA — сохраняются состояние, компоненты, данные.
— Когда очищается: При навигации или фокусе на новой странице.
Сценарий → Используемый кэш:
— Повторный fetch() в компоненте → Request Memoization
— Один и тот же API-запрос между пользователями → Data Cache
— Навигация между страницами → Router Cache (на клиенте)
— Быстрая отдача заранее сгенерированного HTML → Full Route Cache
Anastasiia Berest
Senior Web UI Engineer