Status 304: Konten Tidak Berubah, Pakai Cache Saja
Memahami conditional request dengan ETag dan Last-Modified, dan kenapa 304 membuat web terasa cepat.
"Apakah koran hari ini beda dengan kemarin?"
Setiap pagi kamu bertanya ke loper koran: "apakah edisi hari ini beda dengan yang kemarin saya beli?" Kalau sama, kamu tidak membeli lagi. Itulah conditional request: browser bertanya ke server "apakah file ini berubah sejak terakhir saya unduh?" Kalau tidak, server menjawab 304 Not Modified tanpa mengirim ulang isi file. Browser memakai salinan cache-nya. Hemat bandwidth, halaman terasa instan.
Kenapa 304 penting
Tanpa mekanisme ini, browser harus mengunduh ulang SEMUA file (CSS, JS, gambar) setiap kali user membuka halaman, atau menebak-nebak kapan cache kedaluwarsa. 304 memberi kepastian murah: satu request kecil untuk memastikan cache masih valid, tanpa transfer file besar. Inilah alasan website yang kamu buka kedua kalinya terasa jauh lebih cepat.
Contoh 1: validasi dengan ETag
Request pertama, server memberi "sidik jari" file lewat header ETag:
HTTP/1.1 200 OK
ETag: "a1b2c3"
Content-Type: text/css
/* isi file css */Kunjungan berikutnya, browser mengirim sidik jari itu kembali:
GET /style.css HTTP/1.1
Host: toko.contoh.id
If-None-Match: "a1b2c3"File tidak berubah, server menjawab singkat:
HTTP/1.1 304 Not ModifiedBody kosong. Browser memakai CSS dari cache. Total transfer: hanya beberapa ratus byte.
Contoh 2: validasi dengan waktu modifikasi
Alternatif yang lebih sederhana memakai tanggal:
GET /logo.png HTTP/1.1
Host: toko.contoh.id
If-Modified-Since: Wed, 01 Oct 2026 08:00:00 GMTHTTP/1.1 304 Not ModifiedServer membandingkan tanggal: file tidak diubah sejak 1 Oktober, jadi jawab 304. ETag lebih akurat (mendeteksi perubahan isi sekecil apa pun), sedangkan Last-Modified lebih murah dihitung server.
Kesalahan umum
Salah: mengira 304 adalah error. Bukan. Ini respons sukses yang berarti "cache-mu masih bagus." Yang benar: perlakukan seperti 200 dari sisi user, tidak perlu tindakan apa pun.
Salah: mematikan cache saat development lalu lupa menyalakan. DevTools punya opsi "Disable cache" yang berguna saat coding, tapi memastikan cache production bekerja butuh testing terpisah. Yang benar: uji dengan cache aktif sebelum deploy.
Salah: file berubah tapi ETag tidak. Terjadi kalau server salah konfigurasi dan ETag tidak mencerminkan isi file. Yang benar: pastikan ETag dihitung dari konten file (hash), bukan dari waktu server.
Catatan teknis:
fetch()mengikuti 304 secara transparan: kamu tetap menerima response 200 dengan body dari cache. Kamu hanya melihat 304 mentah di tab Network. Untuk memaksa validasi, pakai opsicache: "no-cache"(tetap validasi ke server) atau"reload"(lewati cache total).
Tantangan
Berburu 304 di website favoritmu
Buka website berita favoritmu:
- Buka DevTools > Network, refresh halaman sekali (biarkan cache terisi).
- Refresh lagi, lalu filter kolom Status.
- Hitung berapa request berstatus 304 dan catat 3 file terbesar yang dihemat (lihat kolom Size: "from disk cache" atau "304").
Tulis temuanmu.