Hur fungerar HTTP-caching med oföränderliga assets och ett CDN?

Question

IT Interview Practice · Accepted Answer

HTTP-caching låter webbläsare och CDN:er återanvända ett svar istället för att hämta det på nytt, styrt av headern **`Cache-Control`**. Vinnarmönstret för webbappar: **hasha dina asset-filnamn och cacha dem för evigt; håll HTML ocachebar.**

## Tvånivåstrategin

```http
# Hashed, versioned assets — content never changes for a given URL
Cache-Control: public, max-age=31536000, immutable
# e.g.  /static/app.9f2c1a.js   (the hash changes when content changes)

# HTML — must always be fresh so it can point at new asset hashes
Cache-Control: no-cache
```

- **`immutable`** talar om för webbläsaren att aldrig omvalidera — ingen villkorlig request alls, inte ens vid omladdning. Säkert eftersom filnamnshashen *är* versionen; nytt innehåll = ny URL.
- **`no-cache`** på HTML är missvisande namngivet: det betyder "lagra det, men omvalidera före användning" (en 304 om oförändrat), så att användare alltid får HTML som refererar de aktuella asset-hasharna.

## Omvalidering och CDN:et

- **`ETag`** / `Last-Modified` möjliggör billiga `304 Not Modified`-svar när `max-age` löper ut.
- Ett **CDN** cachar vid edge-noder nära användarna. Använd `s-maxage` för den delade CDN-cachen och `stale-while-revalidate` för att servera inaktuellt innehåll direkt medan det uppdateras i bakgrunden:

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

## Fallgropar

- Att cacha HTML med en lång `max-age` → användare fastnar på gamla versioner utan något sätt att bryta cachen.
- `immutable` på icke-hashade URL:er → du kan inte skicka en fix.

## Varför det är viktigt

Caching är den billigaste prestandavinsten — den förvandlar återbesök till noll nätverkskostnad och avlastar origin. Mönstret med hashad-oföränderlig-asset + omvaliderad-HTML är branschstandard; att förklara *varför* `no-cache` ≠ "cacha inte" signalerar verkligt djup.

Tvånivåstrategin

Omvalidering och CDN:et

Fallgropar

Varför det är viktigt

Relaterade frågor