Как можно управлять кешированием на стороне клиента (браузера)

Управление кешированием в браузере осуществляется с помощью HTTP-заголовков ответа сервера и специальных техник в URL ресурса. Основная цель — заставить браузер загрузить свежую версию файла, когда это необходимо.

1. HTTP-заголовки

Это основной способ управления кешем. Сервер отправляет их вместе с ресурсом.

• Cache-Control: Главный заголовок для управления кешированием.
  • no-store: Полностью запрещает кеширование. Запрос всегда идет на сервер.
  • no-cache: Браузер должен сначала проверить у сервера, не изменился ли ресурс (сделать запрос с If-None-Match или If-Modified-Since), и только потом использовать кеш.
  • max-age=<seconds>: Указывает, сколько секунд браузер может использовать кешированную версию без проверки.

Пример заголовка для отключения кеша:

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

2. "Cache Busting" (Сброс кеша)

Эта техника заключается в изменении URL ресурса, чтобы браузер воспринял его как новый и загрузил заново. Обычно это достигается добавлением query-параметра.

Почему это работает: Для браузера style.css?v=1 и style.css?v=2 — это два разных URL, даже если они указывают на один и тот же файл.

Примеры реализации:

• Версионирование: Добавление версии сборки.

  <link rel="stylesheet" href="/css/style.css?v=1.0.2">

• Временная метка: Добавление timestamp'а сборки.

  <script src="/js/main.js?t=1678886400"></script>

• Хеш файла: Наиболее надежный способ. URL меняется только тогда, когда меняется содержимое файла.

  <link rel="stylesheet" href="/css/style.a1b2c3d4.css">

  Современные сборщики (Webpack, Vite) делают это автоматически.

3. Пользовательские действия

• Жесткая перезагрузка (Hard Refresh): Ctrl+Shift+R (Windows/Linux) или Cmd+Shift+R (Mac) заставляет браузер проигнорировать кеш для текущей страницы.