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

Основная идея клиентского кэширования

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

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

Самый простой способ — использовать объект Map, где ключом является строка, представляющая запрос (например, URL + параметры), а значением — Promise или уже полученные данные. При вызове функции запроса сначала проверяется наличие ключа в кэше. Если ключ есть и данные ещё актуальны, возвращается сохранённое значение. Если нет — выполняется реальный запрос, результат сохраняется в кэш и возвращается.

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

const cache = new Map();

async function fetchWithCache(url) {
  if (cache.has(url)) {
    return cache.get(url);
  }
  const promise = fetch(url).then(res => res.json());
  cache.set(url, promise);
  return promise;
}

В этом примере мы кэшируем сам Promise, чтобы избежать повторных запросов, даже если несколько компонентов одновременно запрашивают одни и те же данные.

Управление временем жизни кэша

Кэш не должен хранить данные вечно. Можно добавить время жизни (TTL) для каждого элемента. Например, хранить вместе с данными timestamp и при получении проверять, не устарел ли кэш.

function setWithExpiry(key, data, ttl) {
  const item = { data, expiry: Date.now() + ttl };
  cache.set(key, item);
}

function getWithExpiry(key) {
  const item = cache.get(key);
  if (!item) return null;
  if (Date.now() > item.expiry) {
    cache.delete(key);
    return null;
  }
  return item.data;
}

Где применяется

• В React-приложениях с помощью библиотек React Query или SWR, которые автоматически кэшируют запросы.
• В мобильных приложениях для уменьшения трафика.
• В любых SPA для ускорения повторного отображения данных.

Вывод: Клиентское кэширование асинхронных запросов — простой и эффективный способ улучшить производительность и пользовательский опыт, особенно при работе с данными, которые обновляются нечасто. Его стоит применять везде, где возможны повторные запросы к одним и тем же ресурсам.