SWR e React Query: scegliere lo strumento adatto

SWR pesa circa 7 kB dopo la compressione con gzip. React Query v5 pesa circa 13 kB dopo la compressione con gzip. La differenza di dimensioni riflette le funzionalità aggiuntive di React Query: prefetching delle query, annullamento delle query, un ciclo di vita delle query più dettagliato e DevTools integrati.

Per le applicazioni in cui le dimensioni sono importanti o per semplici pattern di recupero e visualizzazione, l'impronta ridotta di SWR rappresenta un vantaggio significativo.

SWR offre un'API più semplice e minimale. Se la sua esigenza principale è recuperare i dati e visualizzarli con la revalidazione automatica, SWR la soddisfa con eleganza e pochissimo codice aggiuntivo.

Essendo sviluppato da Vercel, SWR si integra particolarmente bene con Next.js, soprattutto per combinare il prefetching tramite getServerSideProps o getStaticProps con la revalidazione lato client attraverso i dati di fallback.

Passi i dati precaricati a SWR tramite l'opzione fallback di SWRConfig o l'opzione fallbackData di useSWR. SWR utilizza questi dati come valore iniziale della cache, eliminando il lampo visivo al primo caricamento e abilitando al contempo la revalidazione in background.

Questo pattern è l'approccio consigliato per il recupero dei dati nelle applicazioni Next.js che utilizzano il Pages Router con Vercel.

React Query offre un controllo più preciso sul ciclo di vita delle query: staleTime, gcTime (garbage collection), refetchOnWindowFocus, numero di tentativi e ritardo tra i tentativi sono tutti configurabili separatamente. Il suo sistema di mutation, con i callback onSuccess, onError e onSettled, è espressivo.

React Query supporta anche l'annullamento delle query tramite AbortSignal, utile per le interfacce di ricerca durante la digitazione.

useInfiniteQuery di React Query, insieme a getNextPageParam, è progettato appositamente per lo scorrimento infinito e i pattern di caricamento incrementale. Gestisce la logica del cursore di paginazione e fornisce un oggetto pages piatto o strutturato.

SWR dispone di useSWRInfinite, che offre funzionalità simili, ma con un'API leggermente più a basso livello che richiede di assemblare manualmente un numero maggiore di pagine.

React Query supporta il prefetching delle query al passaggio del mouse o durante il cambio di rotta, tramite queryClient.prefetchQuery. I dati si trovano nella cache prima del montaggio del componente, offrendo un'esperienza di rendering istantanea.

SWR non dispone di un'API integrata per il prefetching oltre ai dati di fallback SSR. Per il prefetching al passaggio del mouse, React Query è la scelta migliore.

React Query v5 ha semplificato l'API facendo sì che useQuery restituisca isPending invece di isLoading, uniformando i pattern degli aggiornamenti ottimistici e migliorando l'inferenza di TypeScript. L'API della v5 è più pulita e coerente rispetto alle versioni precedenti.

Se sta valutando React Query, punti direttamente sulla v5 invece di imparare la v4 per poi effettuare la migrazione.

SWR condivide globalmente le voci della cache tra i componenti in base alla chiave, senza alcuna configurazione di provider oltre a SWRConfig per i valori predefiniti. React Query richiede QueryClientProvider con un'istanza di QueryClient.

Per la prototipazione rapida o le applicazioni semplici, la cache globale senza configurazione di SWR è più rapida da impostare. Il client esplicito di React Query è più adatto alle applicazioni grandi con requisiti di caching complessi.

Scelga SWR quando l'applicazione è basata principalmente su Next.js, i pattern di recupero dei dati sono semplici (fetch-display-revalidate), desidera un bundle di dimensioni minime oppure il suo team dà più valore alla semplicità dell'API che alle funzionalità avanzate.

SWR è inoltre un'ottima scelta quando si introduce gradualmente una libreria per il recupero dei dati in una codebase esistente senza una migrazione significativa.

Scelga React Query quando ha bisogno di una gestione complessa dello stato del server: scorrimento infinito, prefetching delle query, strategie di refetch in background, dipendenze tra query in più passaggi o un controllo granulare del TTL della cache.

React Query dispone inoltre di un ecosistema più attivo di middleware e DevTools, e il suo queryClient può essere testato più facilmente in isolamento.

Alcuni team utilizzano entrambe le librerie: SWR per semplici fetch di una singola risorsa nei componenti foglia e React Query per pagine complesse con più query e prefetching. È una soluzione poco comune, ma valida se il team conosce bene entrambe le API.

Più spesso, i team scelgono una sola libreria e la applicano in modo coerente in tutta l'applicazione, per evitare il cambio di contesto e l'onere di gestire due dipendenze.

SWR (~7 kB) è più semplice, si integra nativamente con Next.js e copre la maggior parte dei pattern di recupero e visualizzazione con una quantità minima di codice. React Query (~13 kB) offre funzionalità più avanzate: query infinite, prefetching, callback granulari del ciclo di vita e annullamento delle query.

Scelga SWR per la semplicità e i progetti Next.js; scelga React Query per requisiti complessi di gestione dello stato del server. Entrambe supportano TypeScript, Suspense, SSR e i pattern offline.