HTTP Caching: Cache-Control, ETag, Validation — Web Fundamentals

Sebelumnya di "Caching Browser & CDN" kamu belajar gambaran besar. Di sini kita masuk ke detail header HTTP: directive Cache-Control yang sering…

Cache adalah tempat menyimpan salinan sesuatu supaya lain kali gak perlu diambil lagi. Browser punya cache sendiri: response (balasan server) yang pernah diunduh disimpan, lalu dipakai ulang. Di materi ini kamu belajar header yang mengaturnya: berapa lama salinan boleh dipakai langsung, dan cara bertanya ke server "isinya masih sama gak?" tanpa mengunduh ulang.

🧪 Tebakan cepat: Cache-Control: no-cache artinya browser gak boleh menyimpan apa pun? Tebak dulu, jawabannya ada di bagian "no-cache, no-store, immutable".

Fresh dulu, lalu stale

Server mengirim response ini untuk GET /api/user:

HTTP/1.1 200 OK
Cache-Control: max-age=60
ETag: "v3"

{ "user": "Alya" }

200 OK adalah status: berhasil, dan isinya ikut dikirim.
Cache-Control: max-age=60 artinya salinan ini boleh dipakai langsung selama 60 detik. Selama itu salinannya disebut fresh (masih segar): browser menjawab dari cache dan gak menghubungi server sama sekali.
ETag: "v3" adalah label versi isinya, semacam sidik jari. Kalau isinya berubah, server memberi ETag baru.
{ "user": "Alya" } adalah body, isi response-nya.

Lewat 60 detik, salinannya jadi stale (basi). Browser belum membuangnya: sebelum memakainya lagi, dia bertanya dulu ke server. Bertanya ulang ini disebut revalidasi.

Revalidasi: ETag dan 304

Waktu revalidasi, browser mengirim ETag yang dia simpan di header If-None-Match:

GET /api/user HTTP/1.1
If-None-Match: "v3"

Server membandingkan ETag itu dengan versi yang dia punya sekarang:

Masih "v3": server membalas 304 Not Modified tanpa body. Artinya isinya belum berubah. Browser memakai salinan lamanya, dan salinan itu fresh lagi selama max-age.
Sudah berubah, misalnya "v4": server membalas 200 OK dengan body baru dan ETag baru. Browser mengganti salinannya.

If-None-Match boleh berisi beberapa ETag dipisah koma, misalnya "v1", "v3". Cukup satu yang cocok untuk membalas 304. Kalau header-nya gak ada, gak ada yang bisa dicocokkan, jadi server membalas 200 dengan isi lengkap.

Membandingkan ETag di kode

Di server, isi header itu cuma teks. Ubah dulu jadi array:

const raw = 'v1, "v3"';
const daftar = raw.split(",").map((e) => e.trim().replace(/"/g, ""));
// daftar: ["v1", "v3"]
daftar.includes("v3"); // true, berarti balas 304

split(",") memotong teks di tiap koma.
trim() membuang spasi di depan dan belakang.
replace(/"/g, "") membuang tanda kutip, jadi "v3" dan v3 dianggap sama.
includes("v3") mengecek apakah ada yang cocok.

Kalau header-nya gak ada, raw berisi undefined, dan undefined.split bikin error. Cek dulu: raw ? ... : [].

no-cache, no-store, immutable

Header	Artinya
`no-cache`	Boleh disimpan, tapi tiap mau dipakai harus revalidasi dulu
`no-store`	Jangan disimpan sama sekali
`public` / `private`	`public`: cache bersama seperti CDN boleh ikut menyimpan. `private`: cuma browser pengguna itu
`immutable`	Isinya gak akan berubah, jadi gak perlu revalidasi selama masih fresh

Itu jawaban tebakannya: no-cache tetap menyimpan, cuma selalu bertanya dulu. Pakai no-cache buat HTML yang sering berubah, dan no-store buat data rahasia seperti halaman saldo bank.

File yang namanya mengandung hash, misalnya app.a1b2c3.js buatan Vite, isinya gak pernah berubah: kalau isinya berubah, namanya ikut berubah. Header terbaiknya:

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

31536000 detik itu satu tahun.

⚠️ Jebakan yang sering ketemu

max-age panjang buat HTML. Pengguna terjebak di versi lama sampai waktunya habis. HTML pakai no-cache, file ber-hash boleh setahun.
Data pribadi tanpa private. CDN bisa menyimpan profil satu pengguna lalu memberikannya ke pengguna lain.
ETag lemah. W/"v3" (ada W/ di depan) artinya "isinya setara", bukan "sama persis byte-nya". Buat If-None-Match, W/"v3" dan "v3" tetap dianggap cocok.

💡 Cara lama: Last-Modified. Selain ETag, server bisa mengirim tanggal terakhir isinya diubah. Browser lalu bertanya dengan If-Modified-Since, dan server membalas 304 kalau belum ada yang berubah sejak tanggal itu. ETag lebih tepat, karena membandingkan versi, bukan jam.

TL;DR: max-age=N membuat salinan fresh selama N detik, dan selama itu browser gak ke server. Setelah stale, browser revalidasi: mengirim If-None-Match berisi ETag yang dia simpan. Kalau cocok, server membalas 304 Not Modified tanpa body; kalau beda atau header-nya gak ada, 200 dengan isi lengkap. no-cache artinya simpan tapi selalu tanya dulu, no-store artinya jangan simpan, dan file ber-hash pakai public, max-age=31536000, immutable.