cachingheaderperformaMenengah3 mnt baca

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
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
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:

http
Cache-Control: public, max-age=31536000, immutable

Untuk file ber-hash (app.a1b2c3.js). Cache setahun penuh.

http
Cache-Control: no-cache

Untuk API yang berubah sering tapi boleh divalidasi murah lewat ETag.

http
Cache-Control: no-store

Untuk 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 Vary memberi tahu cache bahwa response berbeda tergantung header request tertentu (misalnya Vary: Accept-Language untuk konten multi-bahasa).

Tantangan

Audit Cache-Control di website favoritmu

Buka DevTools > Network di website berita favoritmu:

  1. Klik file CSS/JS dan catat header Cache-Control-nya.
  2. Klik request API/XHR dan catat Cache-Control-nya.
  3. Apakah polanya sesuai teori (statis = max-age panjang, API = no-cache/no-store)?

Tulis temuanmu dalam 3 baris.