Digital Transformation
Stale-While-Revalidate (SWR)
TL;DR: Stale-While-Revalidate adalah direktif Cache-Control yang memerintahkan browser dan CDN untuk menyajikan response lama selama jendela waktu tertentu sambil mengambil ulang versi baru di latar. Hasilnya, pengguna dapat halaman instan dari cache lokal sementara data fresh datang silently. Sangat berguna untuk halaman katalog, blog, dan dashboard yang tidak butuh real-time presisi.
Apa itu Stale-While-Revalidate?
SWR adalah ekstensi Cache-Control yang distandardisasi di RFC 5861. Polanya: browser cek cache, kalau response masih dalam jendela stale-while-revalidate=N, langsung tampilkan, lalu kirim background request untuk update cache. Konsep ini juga inti dari ISR di Next.js yang menyajikan halaman lama lalu rebuild di belakang.
Cara Kerja
Cache-Control: max-age=60, stale-while-revalidate=300
| Umur Response | Yang Terjadi |
|---|---|
| 0-60 detik | Fresh, langsung dari cache, tidak ada revalidasi |
| 60-360 detik | Stale, tetap disajikan dari cache, background fetch jalan |
| Lebih dari 360 detik | Cache miss, browser tunggu response baru |
Kenapa Penting?
Untuk website bisnis Indonesia yang konten utamanya tidak berubah tiap detik, SWR memberi pengalaman cepat seperti static site dengan kesegaran mendekati real-time. Saya pakai pola ini di Atmo (LMS) untuk halaman katalog modul, dan Vetmo untuk listing produk. Kombinasi max-age pendek dan stale-while-revalidate panjang membuat first paint instan tanpa risiko menampilkan harga lama lebih dari 5 menit.
Pertanyaan Umum
Apakah SWR sama dengan ISR Next.js?
Konsepnya mirip. ISR adalah implementasi server-side dari pola SWR di level halaman yang dirender Next.js. SWR header bekerja di level HTTP cache (browser/CDN) untuk response apa pun.
Berapa nilai SWR yang aman?
Mulai dari 5x nilai max-age sebagai patokan. Untuk konten yang jarang berubah (about page), SWR bisa dipanjangkan sampai 1 hari.