SWR vs React Query: Memilih Alat yang Tepat

SWR berukuran sekitar 7kb setelah dikompresi dengan gzip. React Query v5 berukuran sekitar 13kb setelah dikompresi dengan gzip. Perbedaan ukuran ini mencerminkan fitur tambahan React Query: prapengambilan kueri, pembatalan kueri, siklus hidup kueri yang lebih terperinci, dan DevTools bawaan.

Untuk aplikasi yang sensitif terhadap ukuran atau pola pengambilan-dan-tampilan sederhana, jejak ukuran SWR yang lebih kecil merupakan keunggulan yang berarti.

SWR memiliki API yang lebih sederhana dan minimalis. Jika kebutuhan utama Anda adalah mengambil data dan menampilkannya dengan validasi ulang otomatis, SWR dapat menanganinya dengan baik menggunakan sangat sedikit kode pendukung.

Dikembangkan oleh Vercel, SWR terintegrasi sangat baik dengan Next.js, terutama untuk menggabungkan prapengambilan melalui getServerSideProps atau getStaticProps dengan validasi ulang di sisi klien menggunakan data cadangan.

Berikan data yang telah diambil sebelumnya kepada SWR melalui opsi fallback di SWRConfig atau opsi fallbackData di useSWR. SWR menggunakan data ini sebagai nilai awal cache, sehingga menghilangkan kilatan saat pemuatan pertama sekaligus memungkinkan validasi ulang di latar belakang.

Pola ini merupakan pendekatan pengambilan data yang direkomendasikan untuk aplikasi Next.js Pages Router dengan Vercel.

React Query menawarkan kendali yang lebih rinci atas siklus hidup kueri: staleTime, gcTime (pengumpulan sampah), refetchOnWindowFocus, jumlah percobaan ulang, dan jeda percobaan ulang semuanya dapat dikonfigurasi secara terpisah. Sistem mutasinya dengan callback onSuccess, onError, dan onSettled bersifat ekspresif.

React Query juga mendukung pembatalan kueri melalui AbortSignal, yang berguna untuk antarmuka pencarian saat Anda mengetik.

useInfiniteQuery milik React Query bersama getNextPageParam dirancang khusus untuk pola gulir tanpa akhir dan pemuatan lebih banyak. Fitur ini mengelola logika kursor halaman dan menyediakan objek halaman yang datar atau terstruktur.

SWR memiliki useSWRInfinite yang mencakup kebutuhan serupa, tetapi dengan API tingkat lebih rendah yang memerlukan penyusunan halaman secara lebih manual.

React Query mendukung prapengambilan kueri saat kursor diarahkan ke suatu elemen atau saat rute berubah menggunakan queryClient.prefetchQuery. Data sudah berada di cache sebelum komponen dirender, sehingga menghasilkan tampilan yang seketika.

SWR tidak memiliki API prapengambilan bawaan selain data fallback SSR. Untuk prapengambilan berbasis pengarahan kursor, React Query merupakan pilihan yang lebih baik.

React Query v5 menyederhanakan API dengan membuat useQuery mengembalikan isPending, bukan isLoading, menyatukan pola pembaruan optimistis, dan meningkatkan inferensi TypeScript. API v5 lebih bersih dan konsisten dibandingkan versi sebelumnya.

Jika Anda sedang mengevaluasi React Query, langsung gunakan v5 daripada mempelajari v4 lalu melakukan migrasi.

SWR membagikan entri cache secara global antar-komponen berdasarkan kunci tanpa konfigurasi provider apa pun selain SWRConfig untuk nilai bawaan. React Query memerlukan QueryClientProvider dengan sebuah instance QueryClient.

Untuk pembuatan purwarupa cepat atau aplikasi sederhana, cache global SWR tanpa konfigurasi lebih cepat disiapkan. Klien eksplisit React Query lebih baik untuk aplikasi besar dengan persyaratan caching yang kompleks.

Pilih SWR jika aplikasi Anda terutama dibangun di atas Next.js, pola pengambilan datanya sederhana (ambil-tampilkan-validasi ulang), Anda menginginkan ukuran bundel minimal, atau tim Anda lebih mengutamakan kesederhanaan API daripada fitur lanjutan.

SWR juga merupakan pilihan yang sangat baik saat Anda menambahkan pustaka pengambilan data secara bertahap ke codebase yang sudah ada tanpa migrasi besar.

Pilih React Query jika Anda memerlukan pengelolaan status server yang kompleks: gulir tanpa akhir, prapengambilan kueri, strategi pengambilan ulang di latar belakang, dependensi kueri bertahap, atau kendali TTL cache yang terperinci.

React Query juga memiliki ekosistem middleware dan DevTools yang lebih aktif, dan queryClient-nya dapat diuji dengan lebih mudah secara terisolasi.

Beberapa tim menggunakan keduanya: SWR untuk pengambilan satu sumber daya yang sederhana di komponen tingkat bawah, dan React Query untuk halaman dengan banyak kueri yang kompleks serta prapengambilan. Pendekatan ini tidak umum, tetapi tetap valid jika tim mahir menggunakan kedua API.

Lebih sering, tim memilih salah satunya dan menerapkannya secara konsisten di seluruh aplikasi untuk menghindari pergantian konteks dan beban tambahan dari dua dependensi.

SWR (~7kb) lebih sederhana, terintegrasi secara native dengan Next.js, dan mencakup sebagian besar pola pengambilan-dan-tampilan dengan kode minimal. React Query (~13kb) menawarkan fitur yang lebih kaya: kueri tanpa akhir, prapengambilan, callback siklus hidup yang terperinci, dan pembatalan kueri.

Pilih SWR untuk kesederhanaan dan proyek Next.js; pilih React Query untuk kebutuhan status server yang kompleks. Keduanya mendukung TypeScript, Suspense, SSR, dan pola luring.