SWR

Название “SWR” происходит от stale-while-revalidate, стратегия инвалидации HTTP-кеша, популяризированная HTTP RFC 5861 (opens in a new tab). SWR — это стратегия, которая сначала возвращает данные из кеша (устаревшие), затем отправляет запрос (ревалидация), и в итоге возвращает актуальные данные.

Обзор

import useSWR from 'swr'
 
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>
}

В этом примере, хук useSWR принимает строку key и функцию fetcher. key — это уникальный идентификатор данных (обычно URL-адрес API), который будет передан в fetcher. fetcher может быть любая асинхронная функция, которая возвращает данные, будь то нативный fetch или такие инструменты как Axios.

Хук возвращает 2 значения: data и error, основанные на статусе запроса.

Особенности

Всего одной строкой кода вы можете упростить логику получения данных в своём проекте, а также у вас будут эти удивительные возможности прямо из коробки:

• Быстрая, легковесная и многократно используемая выборка данных
• Встроенный кеш и дедупликация запросов
• Опыт реального времени
• Независимость от транспорта и протокола
• Поддержка SSR / ISR / SSG
• Готовность использования TypeScript
• React Native

SWR охватывает все аспекты скорости, правильности и стабильности, чтобы помочь вам улучшить опыт:

• Быстрая навигация по страницам
• Интервальный опрос
• Зависимость от данных
• Ревалидация при фокусировке
• Ревалидация при восстановлении сети
• Локальные мутации (Optimistic UI)
• Умная повторная попытка при ошибке
• Пагинация и восстановление позиции прокрутки
• React Задержка (Suspense)

И многое другое.

Сообщество

SWR создана той же командой, что стоит за React фреймворком Next.js (opens in a new tab). Следите за @vercel (opens in a new tab) в Твиттере, чтобы получать новости о проекте.

Присоединяйтесь к обсуждениям на GitHub (opens in a new tab)!