What is the browser cache and how HTTP cache headers control it

HTTP Caching

The browser cache is the fastest possible source for any resource — it requires zero network. Correct cache headers can make repeat visits nearly instant.

The Cache-Control header is the primary control mechanism:

# Cache for 1 year — use for hashed assets (bundle.a3f9c1.js)
Cache-Control: public, max-age=31536000, immutable

# Always revalidate — use for HTML files
Cache-Control: no-cache

# Never cache — use for sensitive API responses
Cache-Control: no-store

# Serve stale while fetching update in background
Cache-Control: max-age=3600, stale-while-revalidate=86400

Cache busting solves the staleness problem for long-cached assets: embed a content hash in the filename. When the file changes, the hash changes, the URL changes, and the browser fetches fresh.

<!-- Webpack / Vite generates this automatically -->
<script src="/assets/main.b3f9c1a2.js"></script>

ETag and Last-Modified headers enable conditional requests — the browser sends the previous ETag back and the server responds with either a full response or 304 Not Modified (headers only, no body), saving bandwidth without bypassing validation.

Strategy: set long max-age on all hashed static assets, set no-cache on HTML so the browser always validates the entry point.