# React Query vs SWR: Mana yang Digunakan di 2026

> Perbandingan TanStack Query dan SWR untuk pengambilan data di Next.js secara berdampingan — dengan contoh kode nyata untuk mutasi, caching, dan SSR.

URL: https://www.matthewswong.com/id/blog/react-query-vs-swr/

- Author: Matthews Wong (https://www.matthewswong.com/id/about/)
- Published: 2025-06-10
- Updated: 2025-06-10
- Category: Web Dev

Baik React Query (kini TanStack Query) maupun SWR memecahkan masalah yang sama: mengelola remote state di React tanpa prop drilling dan spaghetti useEffect yang dihasilkan dari panggilan fetch manual. Saya telah menggunakan keduanya di proyek produksi. SWR menggerakkan situs Next.js publik yang lebih sederhana; React Query menjalankan dashboard untuk alat ERP internal dengan mutasi kompleks, pembaruan optimis, dan dukungan offline.

## Perbedaan Inti: Filosofi

SWR (Stale-While-Revalidate) adalah dari Vercel dan dioptimalkan untuk ekosistem Vercel/Next.js. Filosofinya adalah surface API minimal — satu hook useSWR mencakup sebagian besar kasus penggunaan. React Query dari TanStack lebih beropini tentang manajemen server state, dilengkapi dengan DevTools, dan memiliki dukungan kelas pertama untuk mutasi, pagination, infinite query, dan mode offline.

### Apa yang Mereka Bagikan

Kedua library mendeduplikasi request — jika tiga komponen di halaman yang sama memanggil useSWR('/api/user') atau useQuery(['user']), hanya satu request HTTP yang dikirim. Keduanya melakukan revalidasi saat window fokus dan reconnect. Keduanya mendukung background refetching, fungsi fetcher kustom, dan konfigurasi global.

### Kapan SWR Menang

SWR menang untuk situs berat konten di mana kamu terutama perlu mengambil dan menampilkan data dengan mutasi sederhana sesekali. API-nya lebih kecil untuk dipelajari, terintegrasi sempurna dengan ekosistem Vercel, dan untuk CRUD sederhana tanpa kebutuhan invalidasi cache yang kompleks, ergonomisnya lebih bersih.

> Di Next.js App Router, prefetch data sisi server menggunakan QueryClient.prefetchQuery() di Server Component-mu, kemudian teruskan state yang di-dehydrate ke HydrationBoundary di Client Component. Ini memberimu zero-loading-state pada render pertama sambil tetap mendapatkan semua manajemen cache sisi klien React Query.

## Mutasi: Di Mana React Query Unggul

Mutasi SWR memerlukan pembaruan cache manual melalui fungsi mutate() — kamu memberi tahu SWR apa nilai cache baru seharusnya. Hook useMutation React Query memiliki siklus hidup onMutate / onError / onSettled yang membuat pembaruan optimis, rollback pada error, dan invalidasi cache menjadi pola terstruktur daripada logika ad-hoc.

### Infinite Query dan Pagination

Kedua library mendukung infinite scrolling dengan useInfiniteQuery (React Query) dan useSWRInfinite (SWR). Implementasi React Query lebih ergonomis — array pages dan fungsi fetchNextPage() menangani sebagian besar pola pagination tanpa logika kustom. SWR memerlukan pengkabelan manual lebih banyak tapi memberimu lebih banyak kontrol atas strategi penggabungan data.

## Server State vs Client State

Wawasan kunci yang dibagikan kedua library: server state secara fundamental berbeda dari client state. Client state (toggle UI, input form, modal buka/tutup) milik useState atau state manager seperti Zustand. Server state (record database, respons API) milik React Query atau SWR. Mencampurnya menyebabkan data basi, race condition, dan bug sinkronisasi.

> **Hindari mencampur React Query dan SWR dalam proyek yang sama**

> Menggunakan kedua library dalam codebase yang sama menggandakan biaya bundle dan menciptakan dua layer cache terpisah yang tidak saling mengetahui. Pilih satu saat awal proyek dan pertahankan. Jika kamu mewarisi codebase dengan keduanya, migrasikan semuanya ke React Query (lebih capable) dan hapus SWR.

## Mengintegrasikan dengan Next.js App Router

Di Next.js App Router, Server Component menangani pengambilan awal — tidak perlu React Query atau SWR untuk first paint. React Query dan SWR masuk untuk interaksi sisi klien setelah hidrasi: merefresh data pada aksi pengguna, polling untuk pembaruan langsung, dan mutasi. Bungkus Client Component-mu dalam QueryClientProvider atau SWRConfig di root layout-mu.

## Rekomendasi Saya

Untuk proyek Next.js baru: mulai dengan SWR. Ini mencakup 80% kasus penggunaan dengan bundle lebih kecil dan model mental yang lebih sederhana. Migrasi ke React Query jika kamu membutuhkan DevTools untuk men-debug cache state, melakukan mutasi optimis yang memerlukan rollback, memiliki dependent query yang kompleks, atau membutuhkan perilaku offline-first. Untuk dashboard ERP, panel admin, dan aplikasi berat data: mulai dengan React Query.

## Sumber & Bacaan Lanjutan

- TanStack — Ikhtisar React Query — https://tanstack.com/query/latest/docs/framework/react/overview
- Vercel — Dokumentasi SWR — https://swr.vercel.app/docs
- Vercel / Next.js — Pengambilan Data — https://nextjs.org/docs/app/building-your-application/data-fetching/fetching

| Dimensi | SWR | React Query |
| --- | --- | --- |
| Ukuran bundle | Sekitar 4KB minified dan gzipped | Sekitar 13KB minified dan gzipped |
| Mutations | Panggilan mutate() manual, tanpa API mutation bawaan | Hook useMutation khusus dengan optimistic update |
| Model caching | Cache stale-while-revalidate yang sederhana | Cache yang bisa dikonfigurasi lewat query key, staleTime, dan gcTime |
| Dukungan offline | Revalidate-on-reconnect dasar | Antrean offline dan retry mutation bawaan |
| DevTools | Tidak ada panel devtools resmi | Devtools khusus untuk memeriksa cache dan state query |
| Paling cocok untuk | Data fetching sederhana di halaman publik | Dashboard kompleks dengan mutation dan kebutuhan offline |

## Source links

- https://tanstack.com/query/latest/docs/framework/react/overview
- https://swr.vercel.app/docs
- https://nextjs.org/docs/app/building-your-application/data-fetching/fetching

## FAQ

### Apa perbedaan utama antara React Query dan SWR?

SWR dari Vercel dirancang dengan surface API minimal — satu hook useSWR mencakup sebagian besar kasus penggunaan — dan dioptimalkan untuk ekosistem Vercel/Next.js. React Query (TanStack Query) lebih beropini tentang manajemen server state, dilengkapi DevTools, serta memiliki dukungan kelas pertama untuk mutasi, pagination, infinite query, dan mode offline. Perbedaan ukuran bundle (~4 KB untuk SWR vs ~13,5 KB untuk React Query) penting di situs konten, namun tidak terlalu berpengaruh di dashboard.

### Kapan sebaiknya memilih SWR daripada React Query?

SWR adalah pilihan default yang lebih baik untuk situs berat konten di mana kamu terutama perlu mengambil dan menampilkan data dengan mutasi sederhana sesekali. API-nya lebih kecil untuk dipelajari dan terintegrasi sempurna dengan ekosistem Vercel. Jika kebutuhan datamu hanya 'tampilkan daftar, tampilkan detail, mungkin lakukan pembaruan sederhana', SWR sudah cukup dan menghemat 9 KB JavaScript.

### Mengapa React Query menangani mutasi lebih baik daripada SWR?

Mutasi SWR memerlukan pembaruan cache manual melalui fungsi mutate() — kamu harus secara eksplisit memberi tahu SWR apa nilai cache baru yang seharusnya. Hook useMutation React Query memiliki siklus hidup onMutate / onError / onSettled yang menjadikan pembaruan optimis, rollback saat error, dan invalidasi cache sebagai pola terstruktur, bukan logika ad-hoc. Untuk dashboard ERP di mana pengguna mengedit record dan membutuhkan umpan balik UI segera dengan rollback saat kegagalan jaringan, model mutasi React Query jauh lebih rapi.

### Bagaimana React Query dan SWR berintegrasi dengan Next.js App Router?

Di Next.js App Router, Server Component menangani pengambilan data awal — React Query maupun SWR tidak dibutuhkan untuk first paint. Setelah hidrasi, keduanya menangani interaksi sisi klien seperti merefresh data saat aksi pengguna, polling pembaruan langsung, dan mutasi. Kamu bisa prefetch data di sisi server menggunakan QueryClient.prefetchQuery() dan meneruskan state yang di-dehydrate ke HydrationBoundary di Client Component untuk zero-loading-state pada render pertama; SWR memiliki prop fallback yang setara untuk pola yang sama.

### Apakah boleh menggunakan React Query dan SWR sekaligus dalam satu proyek?

Tidak — menggunakan kedua library dalam codebase yang sama menggandakan biaya bundle dan menciptakan dua layer cache terpisah yang tidak saling mengetahui. Pilih satu saat awal proyek dan pertahankan. Jika kamu mewarisi codebase yang menggunakan keduanya, rekomendasinya adalah migrasikan semuanya ke React Query dan hapus SWR, karena mempertahankan keduanya 'sementara' hampir selalu menjadi permanen.

---

- HTML version: https://www.matthewswong.com/id/blog/react-query-vs-swr/
- English: https://www.matthewswong.com/en/blog/react-query-vs-swr/
- Site index for agents: https://www.matthewswong.com/llms.txt
- Sitemap: https://www.matthewswong.com/sitemap.xml
- API description (OpenAPI): https://www.matthewswong.com/openapi.json