Что такое SWR?

Что такое SWR?

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

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

SWR использует React Hooks. Вы передаете ключ (обычно URL) и функцию fetcher (например, fetch). Библиотека автоматически управляет состоянием данных, ошибками и загрузкой. Она также поддерживает повторную валидацию при фокусе окна, интервальную проверку и оптимистичные обновления.

Пример кода

import useSWR from 'swr';

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

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

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

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

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

Вывод: SWR стоит применять в React-приложениях, где требуется эффективное управление данными с сервера, особенно при частых обновлениях или медленных сетях.