Как кэшировать запросы на фронтенде и как управлять кэшированием?

Кэширование запросов на фронтенде помогает снизить нагрузку на сервер и ускорить загрузку данных. Основные способы:

• HTTP-кэширование: использование заголовков Cache-Control, ETag, Last-Modified для управления кэшированием на уровне браузера и прокси.
• Кэширование в памяти: хранение результатов запросов в переменных или state (например, в React) для повторного использования без новых запросов.
• IndexedDB или localStorage: для долговременного хранения данных между сессиями.

Управление кэшированием включает:

• Установку времени жизни кэша (TTL).
• Инвалидацию кэша при изменении данных (например, по событию или версии).
• Использование библиотек (например, React Query, SWR), которые автоматизируют кэширование и обновление данных.

Пример с использованием fetch и простого кэша в памяти:

const cache = new Map();

async function fetchWithCache(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const response = await fetch(url);
  const data = await response.json();
  cache.set(url, data);
  return data;
}

Такой подход прост, но требует ручного управления инвалидацией кэша.