Header Cache-Control: Atur Kapan Cache Boleh Dipakai
Memahami direktif Cache-Control: max-age, no-cache, no-store, dan strategi caching untuk API.
Label kedaluwarsa pada makanan
Susu kemasan bertuliskan "baik digunakan sebelum 7 hari". Setelah itu, kamu tidak meminumnya lagi tanpa memeriksa. Header Cache-Control adalah "label kedaluwarsa" untuk response HTTP: server memberitahu browser dan perantara (CDN, proxy) berapa lama response boleh disimpan dan dipakai ulang tanpa bertanya lagi.
Kenapa kontrol cache itu penting
Cache yang agresif membuat web super cepat, tapi cache yang salah membuat user melihat data basi: harga lama, stok salah, bahkan data milik user lain. Cache-Control memberi server kendali presisi: file statis boleh di-cache setahun, data user tidak boleh di-cache sama sekali, dan di antaranya ada banyak pilihan.
Contoh 1: cache agresif untuk file statis
HTTP/1.1 200 OK
Cache-Control: public, max-age=31536000, immutable
Content-Type: text/css
/* style.css */Artinya: "boleh disimpan siapa pun (public), selama 1 tahun (31536000 detik), dan file ini tidak akan berubah (immutable)." Pola ini dipakai untuk file dengan nama ber-hash seperti app.a1b2c3.js: kalau isi berubah, namanya ikut berubah, jadi cache lama tidak pernah salah.
Contoh 2: jangan cache data sensitif
HTTP/1.1 200 OK
Cache-Control: no-store
Content-Type: application/json
{"saldo": 500000}no-store berarti "jangan simpan di mana pun", dipakai untuk data sensitif seperti saldo atau profil. Varian no-cache lebih halus: "boleh simpan, tapi selalu validasi ke server dulu sebelum dipakai" (berguna dengan ETag/304 dari modul sebelumnya).
Kesalahan umum
Salah: tidak set Cache-Control sama sekali. Browser menebak-nebak (heuristic caching) dan hasilnya tidak konsisten. Yang benar: selalu set eksplisit, terutama untuk API.
Salah: cache response yang berisi data user. Cache-Control: public pada endpoint profil bisa membuat CDN menyajikan profil orang lain. Yang benar: data personal pakai private, no-store atau minimal private.
Salah: max-age terlalu lama untuk file yang sering berubah. User tidak pernah melihat update. Yang benar: file sering berubah pakai nama ber-hash + max-age panjang, atau max-age pendek + validasi.
Kombinasi yang umum dipakai
Tiga resep siap pakai:
Cache-Control: public, max-age=31536000, immutableUntuk file ber-hash (app.a1b2c3.js). Cache setahun penuh.
Cache-Control: no-cacheUntuk API yang berubah sering tapi boleh divalidasi murah lewat ETag.
Cache-Control: no-storeUntuk data sensitif (profil, saldo). Jangan simpan di mana pun.
Hafalkan tiga resep ini dan kamu sudah benar dalam 95% kasus. Sisanya adalah optimasi lanjutan.
Catatan teknis: Urutan pemeriksaan cache browser: memory cache, disk cache, lalu service worker, baru network. Header
Varymemberi tahu cache bahwa response berbeda tergantung header request tertentu (misalnyaVary: Accept-Languageuntuk konten multi-bahasa).
Tantangan
Audit Cache-Control di website favoritmu
Buka DevTools > Network di website berita favoritmu:
- Klik file CSS/JS dan catat header Cache-Control-nya.
- Klik request API/XHR dan catat Cache-Control-nya.
- Apakah polanya sesuai teori (statis = max-age panjang, API = no-cache/no-store)?
Tulis temuanmu dalam 3 baris.