Digital Transformation
Cache (Browser & Server)
TL;DR: Cache adalah mekanisme menyimpan hasil komputasi atau response HTTP supaya request berikutnya bisa dilayani jauh lebih cepat tanpa mengulang pekerjaan. Cache ada di tiga lapisan utama: browser (di sisi pengunjung), edge CDN (di CDN), dan server (origin). Cache yang dikonfigurasi dengan benar bisa memangkas waktu muat halaman 50-90% untuk pengunjung kembali.
Apa itu Cache?
Cache bekerja dengan prinsip sederhana: jika hasilnya sama, jangan hitung ulang, jangan transfer ulang. Saat browser pertama kali mengambil logo.png, file disimpan di disk lokal. Kunjungan kedua langsung pakai salinan lokal tanpa hit server, asal header Cache-Control mengizinkan.
Caching disebut "the only true optimization" di dunia performance web bukan tanpa alasan. Setiap byte yang tidak perlu dikirim ulang adalah waktu yang dihemat dan beban server yang berkurang. MDN Web Docs menyediakan referensi lengkap soal HTTP caching.
Lapisan Cache yang Wajib Dipahami
| Lapisan | Lokasi | Contoh aset | TTL umum |
|---|---|---|---|
| Browser cache | Disk pengunjung | Logo, JS bundle | 30-365 hari |
| Edge CDN cache | POP terdekat | Gambar produk, halaman statis | 1-30 hari |
| Server cache | Origin (Redis, Memcached) | Hasil query DB | 1 menit - 1 jam |
| Build-time cache | Static generation (Next.js SSG) | Halaman blog | Sampai re-deploy |
Untuk Next.js, kombinasi SSG + ISR + edge cache di Vercel sudah memberi tiga lapisan otomatis: HTML pre-rendered di build time, di-cache di edge, dan browser pengunjung juga cache aset.
Kenapa Penting buat Marketer Indonesia?
Cache yang benar adalah pembeda paling murah antara situs yang terasa enteng dan situs yang terasa berat. Untuk pengunjung kembali, situs dengan cache agresif bisa muncul dalam 200-400 ms, sementara tanpa cache bisa 2-4 detik. Ini langsung berdampak ke bounce rate dan konversi.
Risiko utama: cache stale. Konten lama tetap dilayani walau sudah update. Solusi: pakai versioning (logo.v2.png atau hash) dan invalidasi terprogram via CDN API. Untuk Next.js, fitur revalidatePath dan revalidateTag di App Router menangani ini dengan rapi.
Pertanyaan Umum
Berapa lama cache TTL yang ideal?
Aset dengan hash di nama file (Next.js default): 1 tahun (max-age=31536000, immutable). HTML halaman: 60-300 detik atau pakai ISR. API response dinamis: 0 atau cache-control private.
Apakah cache bisa bikin masalah saat update konten?
Bisa, jika invalidasi tidak diatur. Pakai pola cache busting (filename hash) untuk aset, dan invalidasi via CDN API atau revalidate API untuk halaman. Browser akan otomatis ambil versi baru saat URL berubah.
Istilah Terkait