Расскажи про браузерное кэширование и как его настраивать. Что стоит кэшировать, а что нет?

Что такое браузерное кэширование

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

Основные HTTP-заголовки для управления кэшем

Главный заголовок — Cache-Control. Он задаёт директивы: max-age (время жизни в секундах), no-cache (требовать проверки на сервере перед использованием), no-store (не сохранять вообще), public/private (разрешение на кэширование прокси и браузером). Также используются Expires (устаревший, но ещё встречается), ETag (уникальный идентификатор версии ресурса) и Last-Modified (дата последнего изменения).

Что кэшировать, а что нет

• Кэшировать: статические ресурсы — CSS, JavaScript, изображения, шрифты, иконки, видео. Для них можно задавать длительный max-age (например, 1 год) и использовать версионирование в имени файла (например, app.12345.js).
• Не кэшировать: HTML-страницы, которые часто меняются, ответы с персональными данными, данные авторизации, результаты POST-запросов, любые чувствительные данные. Для них используйте Cache-Control: no-store или no-cache.

Практический пример настройки

Пример конфигурации для статики в Express (Node.js):

app.use('/static', express.static('public', {
  maxAge: '365d',
  etag: true,
  lastModified: true
}));

Для HTML-ответа можно установить заголовки вручную:

res.set('Cache-Control', 'no-store');
res.send(html);

Инвалидация кэша

Когда файл обновляется, браузер может продолжать использовать старую версию. Решение — добавлять хэш содержимого в имя файла (например, styles.a1b2c3.css). При изменении файла меняется хэш, и браузер запрашивает новую версию. Это стандартная практика в сборщиках (Webpack, Vite).

Вывод

Браузерное кэширование — обязательный инструмент для ускорения сайта. Правильная стратегия: кэшировать неизменяемые статические ресурсы с длительным сроком и версионированием, а динамические и чувствительные данные — не кэшировать или использовать проверку на сервере. Это снижает нагрузку на сеть и сервер, улучшая пользовательский опыт.