Bagaimana HTTP caching bekerja dengan aset immutable dan CDN?

Question

IT Interview Practice · Accepted Answer

HTTP caching memungkinkan browser dan CDN menggunakan ulang sebuah response alih-alih mem-fetch-nya lagi, dikendalikan oleh header **`Cache-Control`**. Pola pemenang untuk aplikasi web: **hash nama file asetmu dan cache selamanya; jaga HTML tetap tak-dapat-di-cache.**

## Strategi dua-tingkat

```http
# Aset ber-hash dan berversi — konten tidak pernah berubah untuk URL tertentu
Cache-Control: public, max-age=31536000, immutable
# mis.  /static/app.9f2c1a.js   (hash berubah ketika konten berubah)

# HTML — harus selalu segar agar bisa menunjuk ke hash aset baru
Cache-Control: no-cache
```

- **`immutable`** memberitahu browser untuk tidak pernah melakukan revalidasi — tidak ada conditional request sama sekali, bahkan saat reload. Aman karena hash nama file *adalah* versinya; konten baru = URL baru.
- **`no-cache`** pada HTML dinamai secara menyesatkan: artinya "simpan, tetapi revalidasi sebelum menggunakan" (sebuah 304 jika tidak berubah), sehingga pengguna selalu mendapat HTML yang mereferensikan hash aset terkini.

## Revalidasi dan CDN

- **`ETag`** / `Last-Modified` memungkinkan response `304 Not Modified` yang murah ketika `max-age` kedaluwarsa.
- Sebuah **CDN** melakukan cache di edge node dekat pengguna. Gunakan `s-maxage` untuk cache CDN yang dibagikan dan `stale-while-revalidate` untuk menyajikan konten basi secara instan sambil menyegarkannya di latar belakang:

```http
Cache-Control: public, s-maxage=600, stale-while-revalidate=86400
```

## Jebakan

- Melakukan cache HTML dengan `max-age` panjang → pengguna terjebak pada versi lama tanpa cara untuk mem-bust-nya.
- `immutable` pada URL non-hash → kamu tidak bisa mengirim perbaikan.

## Mengapa ini penting

Caching adalah kemenangan performa termurah — ia mengubah kunjungan berulang menjadi biaya network nol dan mengurangi beban origin. Pola aset-immutable-ber-hash + HTML-tervalidasi adalah standar industri; menjelaskan *mengapa* `no-cache` ≠ "jangan cache" menunjukkan kedalaman yang sesungguhnya.

Strategi dua-tingkat

Revalidasi dan CDN

Jebakan

Mengapa ini penting

Pertanyaan terkait