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?
Stale-While-Revalidate (SWR) adalah direktif HTTP Cache-Control yang distandardisasi lewat RFC 5861 pada 2010, memerintahkan browser dan CDN untuk tetap menyajikan response lama selama jendela waktu tertentu sambil mengambil versi baru di latar belakang, sehingga pengguna mendapat halaman instan tanpa menunggu revalidasi selesai.
Polanya: browser cek cache, kalau response masih dalam jendela stale-while-revalidate=N sesuai RFC 5861, 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, dan bekerja berdampingan dengan CDN yang menyimpan salinan response di edge server terdekat pengguna.
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.