Caching artinya menyimpan salinan sesuatu yang sudah pernah diambil, supaya lain kali bisa langsung dipakai tanpa mengambil ulang dari jauh. Tempat menyimpannya disebut cache. Mirip beli minum: ambil dari kulkas di rumah dulu, kalau habis beli di warung dekat rumah, dan cuma kalau warung juga kosong, barangnya dikirim dari gudang pusat.
🧪 Tebakan cepat: pengguna di Jakarta membuka situs yang servernya di Amerika, tapi halamannya tetap terasa cepat. Kok bisa? Jawabannya ada di bagian "CDN: salinan di dekat pengguna".
Tiga tempat salinan disimpan
Waktu browser meminta style.css, request-nya (permintaannya) lewat jalur ini:
Browser → CDN edge → Server asal
cache browser cache CDN file aslinya
~0 ms ~20 ms ~200 ms
- Cache browser ada di HP atau laptop pengguna sendiri. Paling cepat, karena gak lewat internet sama sekali, tapi cuma dipakai pengguna itu.
- CDN edge adalah server CDN yang paling dekat dengan pengguna, misalnya di Singapura. Salinan di sini dipakai bersama oleh semua pengguna di sekitarnya.
- Server asal (origin) adalah server kamu, tempat file aslinya, misalnya di Amerika. Di dalamnya pun bisa ada cache sendiri, misalnya hasil query database yang disimpan di memori supaya gak dihitung ulang.
Request berhenti di tempat pertama yang punya salinan yang masih boleh dipakai. Ketemu disebut cache hit. Gak ketemu disebut cache miss, dan request lanjut ke tempat berikutnya. Waktu response (balasan) kembali, tiap cache yang dilewati ikut menyimpan salinannya buat lain kali.
Cache-Control: aturan dari server
Server yang menentukan boleh tidaknya sebuah response disimpan, lewat header Cache-Control. Header adalah baris info tambahan yang dikirim bersama response.
Cache-Control: max-age=86400
max-age=86400artinya salinan boleh dipakai langsung selama 86400 detik, yaitu 24 jam atau 1 hari, tanpa bertanya ke server. Lewat dari itu, salinannya harus dicek ulang ke server dulu. Mengecek ulang ini disebut revalidasi.no-cacheartinya salinan boleh disimpan, tapi tiap mau dipakai, browser harus revalidasi: bertanya dulu ke server apakah isinya masih sama. Kalau masih sama, server cukup membalas304 Not Modifiedtanpa mengirim ulang isinya. Namanya menipu:no-cachebukan berarti jangan cache.no-storeartinya jangan disimpan di mana pun. Dipakai buat data rahasia, misalnya halaman saldo bank.privateartinya cuma browser pengguna itu yang boleh menyimpan, CDN gak boleh. Dipakai buat data pribadi, misalnya halaman profil.
Detail cara mengecek ulang (ETag dan 304) dibahas di materi HTTP Caching.
CDN: salinan di dekat pengguna
CDN (Content Delivery Network) adalah jaringan server yang tersebar di banyak kota di dunia, contohnya Cloudflare, Amazon CloudFront, dan Fastly. Keuntungan utamanya: file dikirim dari server yang paling dekat secara geografis dengan pengguna, jadi latency (waktu tunggu perjalanan data) jauh lebih kecil. Pengguna di Jakarta mendapat file dari edge di Singapura dalam sekitar 20 ms, bukan dari Amerika dalam sekitar 200 ms. Itu jawaban tebakannya. Bonusnya, server asal menerima jauh lebih sedikit request.
⚠️ Jebakan yang sering ketemu
no-cachedisangka "jangan cache". Yang benar-benar melarang menyimpan ituno-store.- Data pribadi tanpa
private. CDN bisa menyimpan halaman profil satu pengguna lalu memberikannya ke pengguna lain. - Ganti isi file tanpa ganti nama. Cache browser dan CDN tetap memberi versi lama sampai
max-agehabis. Pakai nama file ber-hash, misalnyaapp.a1b2c3.js, atau hapus salinan di CDN (purge) lewat dashboard-nya. max-agepanjang buat HTML. Pengguna terjebak di halaman lama. HTML lebih aman pakaino-cache.
💡 Satu tempat lagi: service worker. Script khusus di browser ini bisa menyimpan file sendiri supaya situs tetap jalan saat offline. Dibahas di materi PWA.
TL;DR: Salinan bisa disimpan di tiga tempat: cache browser (paling dekat, cuma buat satu pengguna), CDN edge (dekat pengguna, dipakai bersama), dan server asal. Request berhenti di tempat pertama yang punya salinan yang masih boleh dipakai. Server mengaturnya lewat Cache-Control: max-age=86400 boleh dipakai 1 hari, no-cache simpan tapi tanya dulu, no-store jangan simpan, private cuma browser. CDN mempercepat situs karena file dikirim dari server terdekat.