Browser Cache

Zero Latency Is Only One Header Away

 browser cache = copies stored ON THE USER'S DEVICE.
 fastest possible read: no network at all.

 server controls it entirely through response HEADERS:

 HTTP/1.1 200 OK
 Cache-Control: public, max-age=31536000, immutable
 ETag: "v37"

The Directives That Matter

 max-age=N          fresh for N seconds — no request sent at all
 no-cache           store it, but REVALIDATE before each use
 no-store           never store (secrets, sensitive pages)
 private            user-specific; shared caches must skip
 public             any cache may store
 immutable          content NEVER changes → skip revalidation forever
 stale-while-revalidate serve stale, refresh in background
 stale-if-error     serve stale if origin is DOWN ← resilience freebie

Freshness vs Validation

 two mechanisms, different costs:

 FRESHNESS (no request):
   within max-age → browser serves locally. zero network.

 VALIDATION (cheap request):
   expired? ask origin with the old fingerprint:
     If-None-Match: "v37"
   unchanged → 304 Not Modified (headers only, no body)
   changed   → 200 + new content

   304 saves BYTES but still costs a round trip (~50-300ms)
   freshness saves THE REQUEST. prefer long freshness.

The Versioned-Asset Pattern

 problem: long max-age on app.js → users stuck on old code after deploy

 solution: CONTENT-HASHED FILENAMES:
   /assets/app.a8f3c2.js     ← hash changes when file changes
 
 Cache-Control: public, max-age=31536000, immutable   for hashed assets
 Cache-Control: no-cache                              for index.html
                                (revalidates → points at new hashes)

 deploy flow: new build writes NEW filenames; html references them;
 old cached assets stay valid for anyone mid-session.
 instant global deploys without cache-purge machinery.

What to Cache in Browsers

Content	Policy
Hashed JS/CSS/fonts/images	max-age=1yr, immutable
API responses (public data)	short max-age (10–60s) or none
User-specific API responses	private or no-store
HTML shell	no-cache (validate)
Auth pages, PII	no-store

Common Bugs

 ✗ max-age on index.html → users can't get updates until TTL dies
 ✗ no-store on everything → your site re-downloads megabytes per visit
 ✗ forgetting Vary: Accept-Encoding → gzip confusion across proxies
 ✗ caching Set-Cookie responses publicly → session bleed (SECURITY)
 
 header mistakes are silent and global. test with curl -I,
 not by refreshing (browsers special-case reloads!)

Interview Framing

“Reduce load on static assets” starts here: versioned filenames + immutable year-long caching moves ~all asset traffic off your servers permanently — before CDNs even enter. Mention stale-if-error as free resilience. The scored detail is knowing refresh-button behavior differs from normal navigation (reload bypasses freshness), which is why curl testing matters.