What are HTTP Caching Headers?
Learn how HTTP caching headers like Cache-Control, ETag, and Last-Modified control freshness and revalidation for faster page loads.
Expected Interview Answer
HTTP caching headers are response headers such as Cache-Control, ETag, and Last-Modified that tell browsers and intermediate caches how long a response can be reused and how to revalidate it, avoiding unnecessary repeat downloads.
Cache-Control is the primary directive, controlling behavior with values like max-age (how long a response is fresh), no-cache (must revalidate before reuse), no-store (never cache), and public/private (whether shared caches like CDNs may store it). Once a cached response expires, the browser can revalidate cheaply using a conditional request: it sends the stored ETag (a content fingerprint) via If-None-Match, or the Last-Modified date via If-Modified-Since, and the server replies with a cheap 304 Not Modified if nothing changed, avoiding a full re-download. Getting caching right dramatically cuts repeat-visit load times and server load, but stale or misconfigured caching is also a common source of "why isn’t my update showing up" bugs.
- Cuts repeat-visit load times by avoiding redundant downloads
- Reduces server and bandwidth load via shared/CDN caching
- Conditional requests (304) save bandwidth even after expiry
- Fine-grained control over freshness per resource type
AI Mentor Explanation
HTTP caching headers are like a scorecard printed at the start of an innings that fans can keep re-reading without asking the scorer again, as long as no new ball has been bowled. Once an over is complete, a fan can quickly ask "has anything changed?" and get a one-word yes or no instead of a full scorecard reprint. That freshness-window-plus-cheap-revalidation pattern is exactly how Cache-Control and ETags let browsers reuse or cheaply revalidate a cached response.
Step-by-Step Explanation
Step 1
Set Cache-Control on the response
Choose max-age, no-cache, no-store, and public/private per resource type.
Step 2
Attach a validator
Send an ETag (content hash) or Last-Modified date alongside the response.
Step 3
Reuse from cache while fresh
While within max-age, the browser serves the cached copy without contacting the server.
Step 4
Revalidate cheaply on expiry
Send If-None-Match or If-Modified-Since; the server returns 304 if unchanged, or a fresh 200 if not.
What Interviewer Expects
- Correct explanation of Cache-Control directives (max-age, no-cache, no-store, public/private)
- Understanding of ETag/Last-Modified based conditional revalidation
- Knowledge that 304 Not Modified avoids re-sending the body
- Awareness of cache-busting strategies for updated assets (e.g. hashed filenames)
Common Mistakes
- Confusing no-cache (must revalidate) with no-store (never cache)
- Not understanding the difference between browser cache and CDN/shared cache
- Forgetting cache-busting when deploying updated static assets
- Assuming ETag and Last-Modified are interchangeable with Cache-Control
Best Answer (HR Friendly)
“HTTP caching headers tell the browser how long it can reuse a file it already downloaded before checking back with the server, and how to check cheaply when it does. This means returning visitors get a much faster experience because the browser avoids re-downloading things that have not changed.”
Code Example
app.get("/static/app.:hash.js", (req, res) => {
// Hashed filename means content never changes under this URL
res.setHeader("Cache-Control", "public, max-age=31536000, immutable");
res.sendFile(bundlePath);
});
app.get("/api/profile", (req, res) => {
const etag = computeEtag(profileData);
if (req.headers["if-none-match"] === etag) {
return res.status(304).end();
}
res.setHeader("Cache-Control", "private, max-age=60");
res.setHeader("ETag", etag);
res.json(profileData);
});Follow-up Questions
- What is the difference between no-cache and no-store?
- How do ETag and Last-Modified based revalidation differ?
- How would you cache-bust a JavaScript bundle after deploying an update?
- What is the difference between browser caching and CDN caching?
MCQ Practice
1. Which Cache-Control value tells the browser to never store the response at all?
no-store means the response must never be cached; no-cache still allows caching but requires revalidation.
2. What status code does a server return when a conditional request confirms the cached copy is still valid?
304 Not Modified tells the browser its cached copy is still valid, avoiding re-sending the response body.
3. Which header lets the server send a content fingerprint for cheap revalidation?
ETag is a content-based validator the server compares against If-None-Match on subsequent requests.
Flash Cards
What does Cache-Control: max-age=3600 mean? — The response can be reused from cache for 3600 seconds without revalidating.
What is the difference between no-cache and no-store? — no-cache allows caching but requires revalidation; no-store forbids caching entirely.
What does a 304 response mean? — The cached copy is still valid; no new response body is sent.
What header holds a content fingerprint for revalidation? — ETag, checked via the If-None-Match request header.