Есть ситуация, с которой рано или поздно сталкивается практически каждый разработчик.
Мы обновили HTML-файл на сервере. Открываем сайт — всё хорошо.
Пишет клиент: «У меня отображается старая версия».
Открываем другой компьютер — действительно старая версия.
Причина обычно не в сервере и не в самом HTML. В большинстве случаев виновато кеширование браузера.
Что происходит
Когда пользователь впервые открывает страницу, браузер может сохранить её локально.
При следующем посещении браузер не всегда запрашивает файл заново у сервера, а берёт его из собственного кеша.
Это ускоряет загрузку сайта, но создаёт другую проблему.
Мы уже загрузили новую версию страницы на сервер, а пользователь продолжает видеть старую.
Особенно часто это встречается на небольших HTML-сайтах без системы сборки и версионирования файлов.
Как отключить кеширование HTML страницы в браузере через .htaccess и Meta-теги
Решение через meta-теги
Внутрь секции <head> можно добавить следующие мета-теги:
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Expires" content="0">
Они сообщают браузеру, что страницу необходимо запрашивать заново, а не использовать локальную копию.
Для небольших лендингов и промо-сайтов этого часто бывает достаточно.
Более надёжный вариант через .htaccess
Если сайт работает на Apache, можно дополнительно отправлять заголовки кеширования с сервера.
Для этого в .htaccess добавляем:
<FilesMatch "\.html$">
Header set Cache-Control "no-cache, no-store, must-revalidate"
Header set Pragma "no-cache"
Header set Expires 0
</FilesMatch>
В этом случае браузер получает инструкции напрямую от сервера.
Такой подход обычно работает надёжнее, чем одни только meta-теги.
Тут есть нюанс
Полностью отключать кеширование для всего сайта я бы не стал.
Кеширование картинок, шрифтов, CSS и JavaScript обычно наоборот полезно, потому что заметно ускоряет загрузку страниц.
Поэтому чаще всего мы отключаем кеш только для HTML-документов, а для остальных ресурсов используем длительное кеширование и версионирование файлов.
Например:
<link rel="stylesheet" href="style.css?v=2"> <script src="app.js?v=5"></script>
После изменения версии браузер понимает, что файл новый, и скачивает его повторно.
Что я обычно использую
Для простых HTML-сайтов:
- отключаю кеширование HTML через
.htaccess; - CSS и JS подключаю с версией;
- изображения оставляю кешируемыми.
На практике такая схема позволяет избежать большинства ситуаций, когда пользователь видит устаревшую версию сайта после обновления.
Именно поэтому если после деплоя кто-то пишет: «У меня ничего не поменялось», первым делом стоит смотреть не на код, а на кеш браузера.
