Стратегии периферийного кэширования для приложений React

Заголовок ответа Cache-Control управляет тем, как долго Cloudflare и другие CDN хранят ваши ответы SSR в кэше. Основные директивы: max-age (кэш браузера), s-maxage (срок хранения в CDN и общем кэше) и stale-while-revalidate (выдача устаревшего содержимого во время фоновой проверки актуальности).

s-maxage учитывается общими кэшами (CDN), а max-age предназначен для кэшей браузеров. Для страниц SSR обычно задают s-maxage=60 (CDN хранит страницу в кэше 60 секунд) и max-age=0 (браузер всегда повторно проверяет актуальность), чтобы все пользователи получали достаточно свежий контент из кэша на границе.

Добавление stale-while-revalidate=30 в заголовок Cache-Control сообщает Cloudflare, что нужно мгновенно выдать страницу из кэша, одновременно получая свежую версию в фоновом режиме. Пользователь всегда получает быстрый ответ; максимальный срок устаревания равен сумме s-maxage и stale-while-revalidate в секундах.

Персонализированный контент, зависящий от сеанса пользователя или локали, нельзя выдавать не тому пользователю из общего кэша. Заголовок Vary: Cookie сообщает Cloudflare, что каждое уникальное значение Cookie нужно считать отдельной записью кэша, предотвращая передачу данных одного пользователя другому.

Распространённый подход — проверить наличие файла cookie сеанса в Worker, прежде чем решать, использовать ли кэш. Если файл cookie сеанса присутствует, полностью обойдите кэш и сформируйте персонализированный ответ. Если файла cookie сеанса нет, страница является общедоступной и может быть выдана из кэша.

Cloudflare KV — это глобально распределённое хранилище «ключ — значение», в котором данные находятся рядом с пользователями. В KV можно кэшировать отрисованный HTML: сохранить отрисованную страницу как значение с TTL, а в следующих запросах читать её из KV на границе вместо повторной отрисовки с помощью React.

Чтение из KV выполняется быстро, потому что данные реплицируются на пограничный узел, обслуживающий запрос; типичная задержка чтения составляет менее 5 мс. Однако при записи в KV используется согласованность в конечном итоге: запись в одном регионе распространяется на все глобальные PoPs в течение 60 секунд, поэтому некоторые пользователи могут ненадолго увидеть устаревшие данные.

Cloudflare R2 — совместимый с S3 сервис объектного хранения без платы за исходящий трафик. Он подходит для крупных ресурсов, которые не помещаются в KV: модулей WASM, предварительно отрисованных изображений OG и больших наборов данных JSON. Workers получают доступ к R2 через привязки так же, как к KV.

Cloudflare Enterprise поддерживает теги кэша: вы добавляете к ответу тег Cache-Tag: product-42, а при изменении продукта 42 вызываете API Cloudflare, чтобы удалить все ответы с тегом product-42. Это позволяет выполнять точечную инвалидацию кэша без очистки всего кэша.

При развёртывании новой версии Worker существующий кэшированный HTML может ссылаться на имена старых файлов пакетов JS. Надёжная стратегия — включать версию развёртывания в ключи кэша или использовать имена файлов пакетов с версией (с помощью хеширования содержимого в Vite), чтобы старый HTML всегда ссылался на действительные файлы JS, присутствующие в кэше.

Worker, кэширующий HTML SSR в KV, работает по следующей схеме: сформировать ключ кэша из адреса (и, при необходимости, локали), проверить наличие записи в KV и сразу вернуть кэшированный HTML, если запись найдена. При отсутствии записи выполнить отрисовку с React, сохранить результат в KV с TTL, а затем вернуть только что отрисованный HTML.

Пограничное кэширование приложений React объединяет несколько стратегий: s-maxage в Cache-Control для кэширования общедоступных страниц в CDN, Vary: Cookie для защиты персонализированных ответов от совместного использования, KV для кэширования отрисованного HTML на границе и теги кэша для точечной инвалидации. Модель согласованности KV в конечном итоге означает, что распространение записи занимает до 60 секунд, поэтому проектируйте TTL и стратегию инвалидации с учётом этого.