Browser Caching Explained: ETag, Cache-Control
The fastest network request is the one you don't make.
Cache-Control
The boss header.
Cache-Control: max-age=3600
"Browser, keep this file for 1 hour. Don't bother me."
Cache-Control: no-cache
"Browser, you can keep it, but ask me if it changed before using it."
Cache-Control: no-store
"Don't save this anywhere. (Banking data)."
ETag (Entity Tag)
A fingerprint of the file (e.g., hash).
- Server sends file + ETag:
"abcd". - Browser needs file again. Sends
If-None-Match: "abcd". - Server compares. If file hasn't changed, sends
304 Not Modified. (Empty body). Saves bandwidth!
Hashing Filenames (Cache Busting)
Modern builds (Webpack/Vite) produce: bundle.a8f9e.js.
Strategy: Cache-Control: max-age=31536000 (1 year).
If code changes, filename changes (bundle.b7c2d.js). Browser downloads new file.
This is the "Immutable" caching strategy. Best for performance.