cachingstatus-codeperformaMenengah3 mnt baca

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
HTTP/1.1 200 OK
ETag: "a1b2c3"
Content-Type: text/css

/* isi file css */

Kunjungan berikutnya, browser mengirim sidik jari itu kembali:

http
GET /style.css HTTP/1.1
Host: toko.contoh.id
If-None-Match: "a1b2c3"

File tidak berubah, server menjawab singkat:

http
HTTP/1.1 304 Not Modified

Body kosong. Browser memakai CSS dari cache. Total transfer: hanya beberapa ratus byte.

Contoh 2: validasi dengan waktu modifikasi

Alternatif yang lebih sederhana memakai tanggal:

http
GET /logo.png HTTP/1.1
Host: toko.contoh.id
If-Modified-Since: Wed, 01 Oct 2026 08:00:00 GMT
http
HTTP/1.1 304 Not Modified

Server 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 opsi cache: "no-cache" (tetap validasi ke server) atau "reload" (lewati cache total).

Tantangan

Berburu 304 di website favoritmu

Buka website berita favoritmu:

  1. Buka DevTools > Network, refresh halaman sekali (biarkan cache terisi).
  2. Refresh lagi, lalu filter kolom Status.
  3. Hitung berapa request berstatus 304 dan catat 3 file terbesar yang dihemat (lihat kolom Size: "from disk cache" atau "304").

Tulis temuanmu.