What Is Web Caching?
Learn what web caching is, how Cache-Control and ETag headers work, and how CDNs and browsers speed up repeat requests.
Expected Interview Answer
Web caching is the practice of storing copies of responses — HTML, assets, or API data — at various points between origin server and client so that repeat requests can be served faster without redoing the original work.
Caching can happen in the browser (via Cache-Control and ETag headers), at a CDN edge node close to the user, or in a reverse proxy in front of the origin server. HTTP headers like Cache-Control tell caches how long a response is fresh (max-age), whether it can be shared (public/private), and how to revalidate stale content (ETag with If-None-Match, or Last-Modified with If-Modified-Since), enabling a cheap 304 Not Modified response instead of resending the full payload. Application-level caches (Redis, in-memory) store expensive computed or database results to avoid repeating costly work. The core tradeoff is always freshness versus performance: aggressive caching speeds things up but risks serving stale data, so cache invalidation strategy is as important as the caching itself.
- Reduces latency by serving responses closer to or directly from the client
- Cuts origin server load and bandwidth costs
- Enables cheap revalidation via 304 Not Modified responses
- Improves resilience — cached content can serve during partial origin outages
AI Mentor Explanation
Web caching is like a stadium kiosk keeping a stock of printed scorecards from the last few overs instead of running to the scoring booth for every fan request. If a fan asks for a scorecard already printed and still current, the kiosk hands it over instantly. Only when the card is stale or missing does staff make the trip to the booth for a fresh one. That store-and-reuse-until-stale pattern is exactly how web caching avoids repeating expensive origin work.
Step-by-Step Explanation
Step 1
Origin sets caching headers
The server responds with Cache-Control, ETag, and/or Last-Modified headers.
Step 2
Cache stores the response
Browser, CDN, or proxy stores the response according to those directives.
Step 3
Subsequent request checks freshness
If within max-age, the cache serves the stored copy with no network trip to origin.
Step 4
Stale entries revalidate
When expired, the cache sends a conditional request (If-None-Match/If-Modified-Since) and gets a cheap 304 or a fresh body.
What Interviewer Expects
- Understanding of the different cache layers (browser, CDN, reverse proxy, app-level)
- Familiarity with Cache-Control, ETag, and conditional requests
- Ability to explain the freshness-vs-staleness tradeoff
- Awareness of cache invalidation as the hard problem
Common Mistakes
- Treating caching as purely a browser-only concept, ignoring CDNs/proxies
- Not knowing the difference between max-age and no-cache/no-store
- Forgetting that ETag/If-None-Match enables cheap 304 responses
- Underestimating cache invalidation complexity for dynamic content
Best Answer (HR Friendly)
“Web caching means storing a copy of something — a webpage, an image, or data — closer to the user or in the browser itself, so the next time it is needed the app does not have to fetch it all over again from scratch. It makes sites feel faster and reduces load on the server.”
Code Example
app.get('/api/products/:id', async (req, res) => {
const product = await getProduct(req.params.id)
const etag = computeEtag(product)
res.set('Cache-Control', 'public, max-age=60')
res.set('ETag', etag)
if (req.headers['if-none-match'] === etag) {
return res.status(304).end() // cheap, no body sent
}
res.json(product)
})Follow-up Questions
- What is the difference between Cache-Control: no-cache and no-store?
- How does a CDN decide when to purge a cached asset?
- What is cache invalidation and why is it hard?
- How would you cache a personalized, user-specific API response?
MCQ Practice
1. What does the Cache-Control max-age directive specify?
max-age sets the freshness window before a cache must revalidate with the origin.
2. What does a 304 Not Modified response mean?
A conditional request confirms the cached version is still current, avoiding resending the body.
3. Which header enables conditional revalidation via If-None-Match?
ETag is a version identifier the client echoes back via If-None-Match to check freshness.
Flash Cards
What is web caching? — Storing response copies at various layers to avoid redoing origin work on repeat requests.
What does ETag enable? — Conditional revalidation, allowing a cheap 304 instead of resending the full response.
Name the main cache layers. — Browser cache, CDN edge, reverse proxy, and application-level cache.
Core caching tradeoff? — Freshness vs performance — aggressive caching risks serving stale data.