SWR vs. React Query: Das passende Werkzeug auswählen

SWR ist etwa 7kb groß (gzip-komprimiert). React Query v5 ist etwa 13kb groß (gzip-komprimiert). Der Größenunterschied ergibt sich aus den zusätzlichen Funktionen von React Query: Query-Prefetching, das Abbrechen von Queries, ein detaillierterer Query-Lebenszyklus und integrierte DevTools.

Für größenkritische Anwendungen oder einfache Muster zum Abrufen und Anzeigen von Daten ist die kleinere Größe von SWR ein wesentlicher Vorteil.

SWR verfügt über eine einfachere, minimalistischere API. Wenn Ihr Hauptbedarf darin besteht, Daten abzurufen und mit automatischer Revalidierung anzuzeigen, deckt SWR dies mit sehr wenig Boilerplate elegant ab.

Da SWR von Vercel entwickelt wird, integriert es sich außergewöhnlich gut in Next.js, insbesondere beim Kombinieren eines Prefetchings mit getServerSideProps oder getStaticProps mit clientseitiger Revalidierung über Fallback-Daten.

Übergeben Sie vorab abgerufene Daten über die fallback-Option in SWRConfig oder die fallbackData-Option in useSWR an SWR. SWR verwendet dies als initialen Cache-Wert, wodurch das Aufblitzen beim ersten Laden entfällt und gleichzeitig eine Revalidierung im Hintergrund möglich wird.

Dieser Ansatz wird für Next.js-Pages-Router-Anwendungen mit Vercel empfohlen.

React Query bietet eine genauere Kontrolle über den Query-Lebenszyklus: staleTime, gcTime (Garbage Collection), refetchOnWindowFocus, die Anzahl der Wiederholungsversuche und die Verzögerung zwischen Wiederholungen lassen sich jeweils einzeln konfigurieren. Das Mutationssystem mit onSuccess-, onError- und onSettled-Callbacks ist ausdrucksstark.

React Query unterstützt außerdem das Abbrechen von Queries über AbortSignal, was für UIs zur Suche während der Eingabe nützlich ist.

React Querys useInfiniteQuery mit getNextPageParam ist speziell für Infinite-Scroll- und Load-more-Muster konzipiert. Es verwaltet die Logik des Seiten-Cursors und stellt ein flaches oder strukturiertes pages-Objekt bereit.

SWR verfügt über useSWRInfinite, das einen ähnlichen Funktionsumfang abdeckt, aber eine etwas niedrigere Abstraktionsebene hat und mehr manuelles Zusammensetzen von Seiten erfordert.

React Query unterstützt das Prefetching von Queries beim Hover oder beim Routenwechsel mit queryClient.prefetchQuery. Die Daten befinden sich im Cache, bevor die Komponente gemountet wird, und ermöglichen ein sofortiges Rendern.

SWR verfügt außer über SSR-Fallback-Daten über keine integrierte Prefetching-API. Für Hover-basiertes Prefetching ist React Query die bessere Wahl.

React Query v5 hat die API vereinfacht, indem useQuery isPending statt isLoading zurückgibt, die Muster für optimistische Updates vereinheitlicht und die TypeScript-Inferenz verbessert. Die v5-API ist sauberer und konsistenter als frühere Versionen.

Wenn Sie React Query evaluieren, sollten Sie direkt v5 verwenden, statt zunächst v4 zu lernen und anschließend zu migrieren.

SWR teilt Cache-Einträge anhand des Schlüssels automatisch global zwischen Komponenten, ohne eine Provider-Konfiguration außer SWRConfig für Standardeinstellungen. React Query benötigt QueryClientProvider mit einer QueryClient-Instanz.

Für schnelles Prototyping oder einfache Apps lässt sich SWRs globaler Cache ohne Konfiguration schneller einrichten. Der explizite Client von React Query eignet sich besser für große Apps mit komplexen Caching-Anforderungen.

Entscheiden Sie sich für SWR, wenn Ihre App hauptsächlich auf Next.js basiert, die Datenabrufmuster unkompliziert sind (fetch-display-revalidate), Sie eine minimale Bundle-Größe wünschen oder Ihr Team eine einfache API fortgeschrittenen Funktionen vorzieht.

SWR ist auch eine gute Wahl, wenn Sie eine inkrementelle Datenabrufbibliothek in eine bestehende Codebasis integrieren möchten, ohne eine umfangreiche Migration durchzuführen.

Entscheiden Sie sich für React Query, wenn Sie ein komplexes Management des Serverzustands benötigen: Infinite Scroll, Query-Prefetching, Strategien für das erneute Abrufen im Hintergrund, Abhängigkeiten zwischen mehrstufigen Queries oder eine feingranulare Steuerung der Cache-TTL.

React Query verfügt außerdem über ein aktiveres Ökosystem von Middleware und DevTools, und sein queryClient lässt sich leichter isoliert testen.

Einige Teams verwenden beides: SWR für einfache Abrufe einzelner Ressourcen in Leaf-Komponenten und React Query für komplexe Seiten mit mehreren Queries und Prefetching. Das ist unüblich, aber zulässig, wenn das Team mit beiden APIs vertraut ist.

Häufiger entscheiden sich Teams für eine Lösung und wenden sie in der gesamten Anwendung einheitlich an, um Kontextwechsel und den Mehraufwand durch doppelte Abhängigkeiten zu vermeiden.

Wie unterscheiden sich die Bundle-Größen von SWR und React Query ungefähr?

SWR (~7kb) ist einfacher, integriert sich nativ in Next.js und deckt die meisten Fetch-Display-Muster mit minimalem Code ab. React Query (~13kb) bietet umfangreichere Funktionen: Infinite Queries, Prefetching, feingranulare Callbacks im Lebenszyklus und das Abbrechen von Queries.

Wählen Sie SWR für Einfachheit und Next.js-Projekte; wählen Sie React Query für komplexe Anforderungen an den Serverzustand. Beide unterstützen TypeScript, Suspense, SSR und Offline-Muster.