How do Cache-Control and ETag let a browser reuse a response?
Cache-Control: max-age tells the browser how long it may reuse a response without asking. After that, the browser can revalidate with If-None-Match and the ETag; if nothing changed, the server replies 304 Not Modified with no body.
Explain it simply
You buy a newspaper. Cache-Control is the label "valid until tomorrow morning", so you do not buy another. Later you ask the vendor "is this still the latest edition, number 4821?" and he says "yes, same" (304) instead of handing you the whole paper again.
Example
First request:
GET /logo.png
<- 200 OK
Cache-Control: max-age=86400
ETag: "abc123"
Within 24 hours: browser uses its stored copy, no request at all.
After 24 hours:
GET /logo.png
If-None-Match: "abc123"
<- 304 Not Modified (no body, tiny response)no-cache means "store it, but revalidate before use". no-store means do not store at all, which suits banking pages. Static files with a hash in the file name, such as app.9f3c1.js, can use a very long max-age and change the name when the content changes.
What to say in the interview
"max-age lets the browser skip the network entirely. ETag with If-None-Match lets it check cheaply and get a 304 if unchanged. no-cache means revalidate; no-store means never keep a copy."
Common mistakes
- Confusing no-cache with no-store.