HTTP Caching Deep Dive: Cache-Control, ETag & Revalidation
HTTP caching lets browsers and intermediaries reuse prior responses. Cache-Control controls freshness and behavior. Validators like ETag and Last-Modified enable efficient revalidation via 304 responses. Good policies balance hit rate, freshness, correctness, and safety.
You put food (responses) in the fridge with an expiration date (max-age). When you want something, check if it's still fresh. If expired, quickly check with the store (revalidation) before throwing it out. Some items (immutable assets) never expire. Personalized items stay in your private mini-fridge.
1Cache-Control Directives
The primary header for controlling caching. max-age sets freshness lifetime. public/private controls shared vs private caches. no-cache requires revalidation. immutable is perfect for hashed assets.
2Validators: ETag & Last-Modified
Enable efficient revalidation. Server returns 304 Not Modified when content hasn't changed, avoiding full body download.
3stale-while-revalidate & Vary
Serve stale content while refreshing in background for better perceived speed. Vary ensures the correct representation is cached.
| Property | Static Assets (JS/CSS) | HTML Documents | User Data / APIs |
|---|---|---|---|
| Policy | public, max-age=31536000, immutable | public, max-age=0, must-revalidate | private, no-cache or no-store |
| Reason | Hashed filenames + never changes at same URL | Coordinates latest asset graph | Personalized or sensitive content |
Static Assets (JS/CSS)
Policy
public, max-age=31536000, immutable
Reason
Hashed filenames + never changes at same URL
HTML Documents
Policy
public, max-age=0, must-revalidate
Reason
Coordinates latest asset graph
User Data / APIs
Policy
private, no-cache or no-store
Reason
Personalized or sensitive content
Common questions
- ›“Explain how HTTP caching works.”
- ›“What is the difference between no-cache and no-store?”
- ›“How do ETag and Last-Modified enable revalidation?”
- ›“How would you cache strategy for different resource types?”
What interviewers look for
- Fresh vs stale vs revalidate understanding
- Cache-Control mastery and trade-offs
- Correctness before hit rate (Vary, private)
- Resource-type-specific policies
Short answer (60 sec)
Cache-Control controls freshness (max-age) and behavior (public/private, no-cache, immutable). Validators like ETag enable efficient 304 revalidation. Different resources need different policies: long immutable for static assets, short/revalidate for HTML, private for user data.
Detailed answer (senior level)
HTTP caching has three main outcomes: fresh hit (best), stale + revalidate (304), or full miss. Cache-Control is the main directive. ETag/Last-Modified enable conditional requests. Vary prevents wrong-content reuse. stale-while-revalidate improves perceived speed. Strong answers differentiate policies by resource type and emphasize correctness over pure hit rate.
- Using the same Cache-Control for everything
- Forgetting Vary on language or encoding
- Caching personalized content in shared caches
- Using long TTLs without proper invalidation
- Misunderstanding no-cache vs no-store
- ✓Fresh cache hit is ideal — avoid network entirely
- ✓Cache-Control is the primary control mechanism
- ✓Use immutable + long max-age for hashed static assets
- ✓HTML usually needs short freshness or revalidation
- ✓Validators (ETag/Last-Modified) enable cheap 304s
- ✓Vary and private are critical for correctness
- ✓stale-while-revalidate improves perceived performance
- ✓Always differentiate policies by resource type
Related web fundamentals topics
Continue with closely related browser and frontend engineering concepts.