Hoe werkt HTTP-caching met immutable assets en een CDN?

Question

IT Interview Practice · Accepted Answer

HTTP-caching laat browsers en CDN's een response hergebruiken in plaats van hem opnieuw op te halen, gestuurd door de **`Cache-Control`**-header. Het winnende patroon voor web-apps: **hash je asset-bestandsnamen en cache ze voor altijd; houd HTML uncacheable.**

## De tweelaagse strategie

```http
# Gehashte, geversioneerde assets — inhoud verandert nooit voor een gegeven URL
Cache-Control: public, max-age=31536000, immutable
# bijv.  /static/app.9f2c1a.js   (de hash verandert wanneer de inhoud verandert)

# HTML — moet altijd vers zijn zodat het naar nieuwe asset-hashes kan wijzen
Cache-Control: no-cache
```

- **`immutable`** vertelt de browser om nooit te revalideren — helemaal geen conditionele request, zelfs niet bij een herlaad. Veilig omdat de bestandsnaam-hash de versie *is*; nieuwe inhoud = nieuwe URL.
- **`no-cache`** op HTML is misleidend genoemd: het betekent "sla het op, maar revalideer voor gebruik" (een 304 indien ongewijzigd), zodat gebruikers altijd HTML krijgen die naar de huidige asset-hashes verwijst.

## Revalidatie en de CDN

- **`ETag`** / `Last-Modified` maken goedkope `304 Not Modified`-responses mogelijk wanneer `max-age` verloopt.
- Een **CDN** cachet op edge nodes dicht bij gebruikers. Gebruik `s-maxage` voor de gedeelde CDN-cache en `stale-while-revalidate` om verouderde inhoud direct te serveren terwijl deze op de achtergrond wordt ververst:

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

## Valkuilen

- HTML cachen met een lange `max-age` → gebruikers blijven vastzitten op oude versies zonder manier om dit te doorbreken.
- `immutable` op niet-gehashte URL's → je kunt geen fix uitbrengen.

## Waarom het belangrijk is

Caching is de goedkoopste performancewinst — het maakt van herhaalbezoeken nul netwerkkosten en ontlast de origin. Het patroon van gehashte-immutable-asset + gerevalideerde-HTML is de industriestandaard; uitleggen *waarom* `no-cache` ≠ "niet cachen" signaleert echte diepgang.

De tweelaagse strategie

Revalidatie en de CDN

Valkuilen

Waarom het belangrijk is

Gerelateerde vragen