Как кэширование на стороне клиента может работать в связке с бэкендом?

Клиентское кэширование — это механизм, при котором браузер (или другое клиентское приложение) сохраняет ответы сервера локально и переиспользует их при повторных запросах. Это снижает нагрузку на сервер, уменьшает задержки и экономит трафик. Управление кэшем происходит через HTTP-заголовки, которые сервер отправляет вместе с ответом.

Основные заголовки

• Cache-Control — главный заголовок: задаёт max-age, no-cache, no-store, public, private, must-revalidate.
• Expires — устаревший абсолютный срок годности (используется реже).
• ETag — уникальный идентификатор версии ресурса, используется для валидации.
• Last-Modified — дата последнего изменения ресурса.

Как это работает

Когда браузер получает ответ с Cache-Control: max-age=3600, он сохраняет его на час. В течение этого времени повторные запросы к тому же URL обслуживаются из кэша без обращения к серверу. Когда срок истекает, браузер отправляет условный запрос с заголовком If-None-Match (значение ETag) или If-Modified-Since. Сервер сравнивает и, если ресурс не изменился, отвечает 304 Not Modified без тела — браузер берёт данные из кэша.

Пример на Node.js/Express

const express = require('express');
const crypto = require('crypto');
const app = express();

app.get('/data', (req, res) => {
  const body = JSON.stringify({ value: 42 });
  const etag = crypto.createHash('md5').update(body).digest('hex');

  if (req.headers['if-none-match'] === etag) {
    return res.status(304).end(); // данные не изменились
  }

  res.set('Cache-Control', 'public, max-age=60');
  res.set('ETag', etag);
  res.send(body);
});

app.listen(3000);

Стратегии

1. Immutable — для статики с хэшем в имени файла (max-age=31536000, immutable).
2. Revalidate — для API: no-cache + ETag, чтобы всегда проверять актуальность.
3. No-store — для приватных данных (токены, персональная информация).

Итог: клиентское кэширование стоит применять для статики, редко меняющихся данных и публичных API, чтобы ускорить загрузку и снизить нагрузку на бэкенд, но для чувствительных данных всегда используйте no-store.