Web Fundamentals

HTTP Caching Deep Dive: Cache-Control, ETag & Revalidation

Web Fundamentals Map

Rendering & Browser Architecture

Critical Rendering PathScript Loading Patterns (async/defer)Event Loop Deep DiveJavaScript Module Systems (CJS, ESM, UMD)Dynamic Module Loading (import())Import on InteractionImport on VisibilityBrowser Rendering Pipeline & Layout ThrashingRendering Strategies (CSR, SSR, SSG, ISR)Streaming SSR & Progressive HTMLIslands ArchitectureReact Server ComponentsFramework Reactivity (React, Vue, Svelte, Solid)HTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC)DNS Resolution & TTL Caching

Performance

Core Web Vitals: LCP, INP, CLSPerformance Optimization Trade-offsCritical Resource PrioritizationCode Splitting & Dynamic ImportsTree Shaking & Dead Code EliminationLazy LoadingResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip & BrotliImage & Video OptimizationAdaptive LoadingList VirtualizationWeb Workers vs Main ThreadMemory Leaks: Detection & PreventionManaging Third-Party ScriptsHow CDNs WorkHTTP Caching Deep DiveService Workers & Offline StrategyPWA Fundamentals

Security

Cross-Site Scripting (XSS)Cross-Site Request Forgery (CSRF)CORS ExplainedCORS Preflight, Credentials & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? (TLS/SSL)Authorization Best PracticesCookie Security & Session Hardening

State & Data Architecture

State Management Guide (Context vs Zustand vs Redux)React Query & Server State CachingData Fetching PatternsCaching StrategiesPagination: Offset vs Cursor-BasedReal-time Communication (WebSocket, SSE, Polling)
mediumWeb Fundamentals

HTTP Caching Deep Dive: Cache-Control, ETag & Revalidation

Learn the interview-ready mental model, practical trade-offs, and production patterns for this web fundamentals topic.

Topic content

TL;DRFresh hit > stale + revalidate > full miss. Use different policies for static assets, HTML, and user data.
Very High Signal
Google
Meta
Netflix
Agoda
30-Second Answerstart every interview with this

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.

First Request → Store in Cache
Subsequent Request
├── Fresh → Serve immediately
├── Stale → Revalidate (304 or 200)
└── Miss → Full fetch

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.

Key Takeaways
  • ✓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
PreviousNext

Topic Guide

On this page