Konsep Inti SWR: Stale-While-Revalidate

SWR merupakan singkatan dari Stale-While-Revalidate, sebuah strategi tembolok HTTP yang ditetapkan dalam RFC 5861. Strateginya adalah: sajikan data usang (yang tersimpan di tembolok) segera kepada pengguna, lalu validasi ulang di latar belakang dan perbarui antarmuka saat data terbaru tiba.

Pendekatan ini memprioritaskan kinerja yang dirasakan: pengguna langsung melihat data, bukan menunggu perjalanan pulang-pergi jaringan.

Dengan pola pemuatan tradisional, pengguna melihat indikator pemuatan pada setiap navigasi. Dengan SWR, mereka langsung melihat data terakhir yang diketahui dan antarmuka diperbarui secara senyap di latar belakang jika data telah berubah.

Hal ini membuat aplikasi terasa jauh lebih cepat dan mengurangi gangguan kognitif akibat status pemuatan.

SWR secara otomatis memvalidasi ulang data ketika: jendela peramban kembali mendapatkan fokus (pengguna berpindah tab lalu kembali), koneksi jaringan pulih setelah luring, mutate() dipanggil secara eksplisit, atau pengatur waktu refreshInterval yang dapat dikonfigurasi terpicu.

Pemicu otomatis ini menjaga data tetap terbaru tanpa pengembang harus mengelola logika pengambilan ulang secara manual.

Sebuah kunci SWR dapat berada dalam salah satu dari beberapa status: loading (tidak ada data dalam tembolok, pengambilan pertama sedang berlangsung), revalidating (ada data dalam tembolok, penyegaran latar belakang sedang berlangsung), error (permintaan gagal), atau success (data terbaru tersedia).

Memahami status-status ini membantu Anda membuat kerangka pemuatan dan antarmuka galat yang akurat.

SWR mempertahankan tembolok global di memori yang menggunakan kunci permintaan sebagai pengenal (biasanya berupa string URL). Setiap komponen yang meminta kunci yang sama mendapatkan nilai yang sama dari tembolok dan ikut serta dalam siklus validasi ulang yang sama.

Deduplikasi otomatis ini berarti 10 komponen dapat memanggil useSWR dengan kunci yang sama dan hanya satu permintaan jaringan yang dibuat.

SWR memisahkan logika pengelolaan tembolok dari proses pengambilan data yang sebenarnya. Anda menyediakan fungsi pengambil data: fungsi asinkron yang menerima kunci dan mengembalikan data.

Fungsi pengambil data ini dapat diganti: gunakan fetch, axios, graphql-request, atau sumber data asinkron apa pun. SWR menangani penyimpanan dalam tembolok dan validasi ulang terlepas dari cara kerja fungsi pengambil data tersebut.

Bungkus aplikasi Anda dengan SWRConfig menggunakan prop value yang berisi fungsi pengambil data: value={{ fetcher: (url) => fetch(url).then(r => r.json()) }}. Setiap panggilan useSWR yang tidak menyertakan argumen fetcher menggunakan bawaan global ini.

Hal ini memusatkan konfigurasi API (URL dasar, header autentikasi) di satu tempat tanpa mengulanginya dalam setiap pemanggilan kait.

Pola klasik menggunakan useEffect + useState untuk mengelola status pemuatan, data, dan galat secara manual. SWR mengganti semua itu dengan satu pemanggilan kait yang secara otomatis menangani penyimpanan dalam tembolok, deduplikasi, penyegaran di latar belakang, dan percobaan ulang saat terjadi galat.

Pengurangan kode ini signifikan: komponen pengambilan data pada umumnya menyusut dari lebih dari 20 baris menjadi 3 baris.

Kunci mengidentifikasi sebuah permintaan secara unik. Gunakan string URL untuk kasus sederhana. Untuk permintaan berparameter, gunakan kunci array: [url, params] dengan params berupa objek atau string yang stabil. Null menonaktifkan permintaan.

Desain kunci yang baik memastikan permintaan yang terkait berbagi entri tembolok dan permintaan yang tidak terkait tidak saling bertabrakan.

SWR cerdas dalam memvalidasi ulang: dedupingInterval (bawaan 2 detik) mencegah beberapa validasi ulang berjalan bersamaan jika banyak komponen dipasang sekaligus. Hanya satu permintaan dikirim per kunci dalam jendela deduplikasi.

Hal ini mencegah masalah lonjakan permintaan serentak yang umum terjadi pada pohon komponen besar ketika banyak komponen mengambil data yang sama.

SWR dibuat oleh Vercel, perusahaan di balik Next.js, dan integrasinya berlangsung mulus. getServerSideProps atau getStaticProps dapat mengambil data terlebih dahulu, lalu SWR menghidrasi dari nilai yang telah diambil tersebut di klien.

Hal ini memberi Anda HTML awal yang dirender di server dengan validasi ulang otomatis di sisi klien saat pemasangan, sehingga menggabungkan keunggulan SSR dan SWR.

Manakah dari berikut ini yang NOT memicu validasi ulang SWR secara bawaan?

SWR menerapkan strategi Stale-While-Revalidate: sajikan data yang tersimpan di tembolok segera, validasi ulang di latar belakang, lalu perbarui antarmuka saat data terbaru tersedia. SWR memicu validasi ulang saat fokus, tersambung kembali, mutate, dan pemeriksaan berkala. Tembolok global mendeduplikasi permintaan lintas komponen, dan fungsi pengambil data dapat diganti sepenuhnya.

Model ini sangat menyederhanakan kode pengambilan data sekaligus memberikan kinerja yang terasa lebih cepat.