SWR и React Query: выбор подходящего инструмента

Размер SWR в сжатом формате gzip составляет примерно 7 КБ. Размер React Query v5 — примерно 13 КБ в сжатом формате gzip. Разница в размере отражает дополнительные возможности React Query: предварительную загрузку запросов, отмену запросов, более подробный жизненный цикл запроса и встроенные DevTools.

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

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

Поскольку SWR разработан Vercel, он особенно хорошо интегрируется с Next.js, в том числе при сочетании предварительной загрузки через getServerSideProps или getStaticProps с повторной проверкой на стороне клиента через резервные данные.

Передавайте предварительно загруженные данные в SWR через опцию fallback в SWRConfig или опцию fallbackData в useSWR. SWR использует их как начальное значение кэша, устраняя мерцание при первой загрузке и одновременно позволяя выполнять фоновую повторную проверку.

Этот подход рекомендуется для приложений Next.js с маршрутизатором Pages Router, работающих на Vercel.

React Query предоставляет более точный контроль над жизненным циклом запроса: staleTime, gcTime (сборка мусора), refetchOnWindowFocus, число повторных попыток и задержка между ними настраиваются независимо. Система мутаций с обратными вызовами onSuccess, onError и onSettled обладает широкими возможностями.

React Query также поддерживает отмену запросов через AbortSignal, что полезно для интерфейсов поиска по мере ввода.

useInfiniteQuery в React Query вместе с getNextPageParam специально предназначен для бесконечной прокрутки и сценариев с кнопкой загрузки дополнительных данных. Он управляет логикой курсора страниц и предоставляет плоский или структурированный объект pages.

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

React Query поддерживает предварительную загрузку запросов при наведении курсора или смене маршрута с помощью queryClient.prefetchQuery. Данные попадают в кэш ещё до монтирования компонента, благодаря чему он отображается мгновенно.

В SWR нет встроенного программного интерфейса предварительной загрузки, кроме резервных данных для SSR. Для предварительной загрузки при наведении лучше подходит React Query.

React Query v5 упростил программный интерфейс: теперь useQuery возвращает isPending вместо isLoading, шаблоны оптимистичных обновлений унифицированы, а вывод типов TypeScript улучшен. Программный интерфейс v5 стал чище и последовательнее по сравнению с предыдущими версиями.

Если вы оцениваете React Query, сразу выбирайте v5, а не изучайте v4 с последующей миграцией.

SWR глобально разделяет записи кэша между компонентами по ключу и не требует настройки поставщика, кроме SWRConfig для задания значений по умолчанию. React Query требует QueryClientProvider с экземпляром QueryClient.

Для быстрого прототипирования или простых приложений глобальный кэш SWR без настройки позволяет быстрее начать работу. Явный клиент React Query лучше подходит для крупных приложений со сложными требованиями к кэшированию.

Выбирайте SWR, если приложение в основном построено на Next.js, сценарии загрузки данных просты — загрузка, отображение и повторная проверка, — вам нужен минимальный размер сборки или команда предпочитает простоту программного интерфейса расширенным возможностям.

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

Выбирайте React Query, если вам нужно сложное управление состоянием сервера: бесконечная прокрутка, предварительная загрузка запросов, стратегии фоновой повторной загрузки, зависимости между многоэтапными запросами или детальный контроль TTL кэша.

У React Query также более активная экосистема промежуточного ПО и DevTools, а queryClient проще проверять изолированно.

Некоторые команды используют обе библиотеки: SWR для простых запросов отдельных ресурсов в дочерних компонентах и React Query для сложных страниц с несколькими запросами и предварительной загрузкой. Это необычный, но допустимый вариант, если команда хорошо владеет обоими программными интерфейсами.

Чаще команды выбирают одну библиотеку и последовательно применяют её во всём приложении, чтобы избежать переключения контекста и накладных расходов от двух наборов зависимостей.

Как примерно соотносятся размеры сборок SWR и React Query?

SWR (примерно 7 КБ) проще, изначально интегрируется с Next.js и покрывает большинство сценариев загрузки и отображения данных с минимальным количеством кода. React Query (примерно 13 КБ) предоставляет больше возможностей: бесконечные запросы, предварительную загрузку, детальные обратные вызовы жизненного цикла и отмену запросов.

Выбирайте SWR для простоты и проектов на Next.js, а React Query — для сложных требований к состоянию сервера. Обе библиотеки поддерживают TypeScript, Suspense, SSR и сценарии работы офлайн.