Caching menyimpan salinan resource agar tidak perlu diunduh ulang setiap kali. Ini salah satu teknik paling efektif untuk mempercepat website.
Level caching di web:
Browser Cache → CDN Cache → Reverse Proxy Cache → Application Cache → Database Cache
(terdekat user) (terjauh user)
Browser Cache (HTTP Caching):
Browser menyimpan response berdasarkan cache headers dari server.
1. Cache-Control:
Cache-Control: max-age=31536000, public, immutable
| Directive | Fungsi |
|---|---|
max-age=N |
Cache valid selama N detik |
public |
Boleh di-cache oleh CDN dan browser |
private |
Hanya browser yang boleh cache (data personal) |
no-cache |
Tetap cache, tapi validasi ke server dulu |
no-store |
Jangan cache sama sekali |
immutable |
File tidak akan berubah (hapus revalidation) |
2. ETag — validasi cache:
Response awal:
ETag: "abc123"
Request berikutnya:
If-None-Match: "abc123"
Server membalas:
304 Not Modified (pakai cache)
— atau —
200 OK + data baru + ETag baru
Strategi caching yang baik:
- File statis (JS, CSS, gambar):
Cache-Control: max-age=31536000, immutable+ hash di filename (app.a1b2c3.js) - HTML:
Cache-Control: no-cache(selalu validasi, tapi simpan di cache) - API response:
Cache-Control: private, max-age=60(cache singkat) - Data sensitif:
Cache-Control: no-store(jangan cache)
CDN (Content Delivery Network):
CDN adalah jaringan server yang tersebar di seluruh dunia. Ketika user di Jakarta mengakses website yang servernya di Amerika, CDN menyajikan konten dari server terdekat (misalnya Singapore).
Tanpa CDN:
User (Jakarta) → Server (US) = 200ms latency
Dengan CDN:
User (Jakarta) → CDN Edge (Singapore) = 20ms latency
CDN populer:
- Cloudflare — gratis tier, security + performance
- AWS CloudFront — terintegrasi AWS
- Vercel Edge — otomatis untuk Next.js/Vercel deployments
// Service Worker cache (untuk PWA):
self.addEventListener("fetch", (event) => {
event.respondWith(
caches.match(event.request).then((cached) => {
return cached || fetch(event.request);
})
);
});
Cache invalidation adalah masalah tersulit di computer science. Strategi yang umum: hash-based filenames, purge CDN cache via API, versioned API endpoints.
