Как работает кэширование запросов в SWR?

Как работает кэширование в SWR

SWR (stale-while-revalidate) — это библиотека для выборки данных в React, которая реализует стратегию кэширования HTTP. Основная идея заключается в том, чтобы сначала показать пользователю устаревшие (stale) данные из кэша, а затем в фоне выполнить запрос на сервер для получения свежих данных. Это позволяет интерфейсу быть отзывчивым и не ждать завершения сетевого запроса.

Механизм работы

• При первом вызове useSWR выполняется запрос к серверу, результат сохраняется в кэш.
• При повторном вызове с тем же ключом SWR сначала возвращает данные из кэша (stale), затем инициирует новый запрос (revalidate).
• После получения ответа кэш обновляется, и компонент перерисовывается с новыми данными.

Пример кода

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then(res => res.json());

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher);

  if (error) return <div>Ошибка загрузки</div>;
  if (!data) return <div>Загрузка...</div>;
  return <div>Привет, {data.name}!</div>;
}

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

SWR использует глобальный кэш по умолчанию, но можно настроить собственный провайдер кэша. Ключ запроса (первый аргумент useSWR) служит идентификатором для кэширования. Если ключ меняется, старый кэш для предыдущего ключа остаётся, но новый запрос выполняется заново.

Вывод

Кэширование в SWR идеально подходит для приложений, где важна скорость отклика и актуальность данных, например, в дашбордах или социальных сетях. Оно уменьшает задержки и снижает нагрузку на сервер, автоматически обновляя данные при необходимости.