---
title: Browser Cache
description: Salinan aset di perangkat pengunjung. Cache-Control yang tepat mempercepat kunjungan berikutnya tanpa menyajikan versi basi.
canonical: https://penasihathosting.com/wikihosting/browser-cache
type: wiki
locale: id
updated: 2026-10-29
author: Willya Randika
---

# Browser Cache

## Overview

- **Summary:** Salinan aset di perangkat pengunjung. Cache-Control yang tepat mempercepat kunjungan berikutnya tanpa menyajikan versi basi.
- **Author:** Willya Randika ([profile](/penulis/willya-randika))

## Article

**Browser cache** adalah salinan aset (CSS, JS, gambar, font) yang disimpan di perangkat pengunjung. Saat pengunjung kembali, browser bisa memakai salinan lokal tanpa meminta ulang ke server.

## Header yang mengatur

| Header | Fungsi |
| --- | --- |
| `Cache-Control` | Aturan utama: `max-age`, `public`, `private`, `no-store` |
| `Expires` | Waktu kedaluwarsa versi lama; masih dipakai sebagian server |
| `ETag` | Fingerprint file untuk validasi `If-None-Match` |
| `Last-Modified` | Waktu perubahan terakhir untuk validasi |

Contoh umum:

```http
Cache-Control: public, max-age=31536000, immutable
```

Dipakai untuk aset yang namanya mengandung hash (`app.3f9c2.js`). Untuk HTML, gunakan `no-cache` atau `max-age` pendek agar perubahan cepat terlihat.

## Cache busting

Jika nama file tetap sama, browser bisa terus memakai versi lama. Solusinya: ubah nama file saat build (`app.[hash].js`), atau tambahkan query version. Jangan mengandalkan `?v=1` untuk semua aset tanpa mengubahnya saat deploy.

## Yang perlu diperhatikan

- **Bedakan browser cache dan CDN cache.** Keduanya punya aturan sendiri.
- **Jangan cache HTML lama.** Halaman bisa menampilkan konten usang setelah deploy.
- **`no-store` untuk data sensitif.** Jangan simpan halaman akun di cache publik.
- **Uji setelah deploy.** Hard reload atau Incognito membantu memastikan versi baru.
- **304 adalah respons sehat.** Browser memakai cache dan server menghemat bandwidth.

Setiap deploy sebaiknya menghasilkan nama file aset baru. Jika HTML di-cache terlalu lama, pengunjung bisa melihat tautan ke aset lama yang sudah tidak ada. Uji dengan Incognito setelah deploy, lalu pastikan `Cache-Control` untuk HTML dan aset statis berbeda. Jangan mencampur cache publik dan privat dalam satu aturan, dan dokumentasikan kebijakan cache di runbook deploy. Periksa header response di DevTools dan catat hasilnya setelah deploy. Cek juga di perangkat baru.

## FAQ

<Accordion>
  <AccordionItem title="Apakah browser cache mempercepat website?">
    Ya, untuk kunjungan berikutnya. Aset yang sudah tersimpan tidak perlu diunduh ulang.
  </AccordionItem>
  <AccordionItem title="Mengapa perubahan CSS tidak terlihat?">
    Kemungkinan browser masih memakai cache. Gunakan cache busting dengan nama file ber-hash atau hard reload saat menguji.
  </AccordionItem>
  <AccordionItem title="Apa beda no-cache dan no-store?">
    `no-cache` masih menyimpan salinan tetapi harus memvalidasi ulang. `no-store` tidak menyimpan sama sekali dan lebih ketat untuk data sensitif.
  </AccordionItem>
</Accordion>