Skip to content

SWR

React хуки для выборки данных

Лёгкий

Бэкэнд-независимый

В реальном времени

SSR / ISR / SSG

Задержка

TypeScript

Пагинация

Удалённо + Локально

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

С SWR, компоненты получат поток постоянно и автоматически обновляющихся данных.
И пользовательский интерфейс всегда будет быстрым и реактивным.

Обзор

import useSWR from 'swr'
function Profile() {
const { data, error } = useSWR('/api/user', fetcher)
if (error) return <div>ошибка загрузки</div>
if (!data) 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.
Следите за @vercel в Твиттере, чтобы получать новости о проекте.

Присоединяйтесь к обсуждениям на GitHub!