Back
Web Fundamentals

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

Web Fundamentals
Build & Deployment: Monorepo, CI/CD, Strategies & Release SafetyState Management: Choosing the Right SolutionRedux: Predictable State Container (RTK + RTK Query)React Query (TanStack Query): Server State CachingData Fetching Patterns: REST, GraphQL, tRPC & Real-timeGraphQL Fundamentals for Frontend: Shape, Caching, and TradeoffsgRPC-Web Fundamentals: Browser Constraints and Proxy ModelCaching Strategies: Client, Server & EdgeData Normalization: Organizing State for PerformanceAPI Design Best Practices: Pagination, Errors, Versioning & Type SafetyAPI Versioning Strategies for Frontend CompatibilityPagination: Offset vs Cursor-BasedRate Limiting & API Resilience: Retries, Backoff, Jitter, IdempotencyHow Frontend Developers Can Handle Millions of API Requests Without Crashing EverythingBrowser Storage: Cookies, SessionStorage, LocalStorage, IndexedDBReal-time Communication: WebSockets, SSE & PollingWebRTC: Real-Time Communication in the BrowserCore Web Vitals: LCP, INP & CLSPerformance Optimization Trade-offsCritical Resource Prioritization: Optimize Loading OrderCode Splitting: Optimize Bundle Size with Dynamic ImportsTree Shaking: Eliminate Dead Code from Your BundleLazy Loading: Load Resources On-DemandResource Hints: Preload, Prefetch & PreconnectText Compression: Gzip and BrotliImage & Video Optimization: Modern Formats & TechniquesAdaptive Loading: Optimize for Device & NetworkList Virtualization: Render Large Lists EfficientlyWeb Workers vs Main Thread: Offloading Heavy WorkMemory Leaks in Frontend Apps: Detection & PreventionManaging Third-Party Scripts: Optimization StrategiesHow CDNs Work: Edge Delivery, Caching & PerformanceHTTP Caching Deep Dive: Cache-Control, ETag & RevalidationService Workers & Offline Strategy: Cache First, Network First & Update LifecyclePWA Fundamentals: Manifest, Installability & Offline UXCritical Rendering PathScript Loading: async vs deferEvent Loop: Understanding JavaScript Execution ModelJavaScript Module Systems: CJS vs ESM vs UMDDynamic Module Loading: import() FunctionImport on Interaction: Load When User InteractsImport on Visibility: Lazy Loading with IntersectionObserverBrowser Rendering Pipeline & Layout ThrashingRendering Strategies: CSR vs SSR vs SSG vs ISRStreaming SSR: Progressive HTML StreamingIslands Architecture: Independent Component HydrationReact Server Components: Zero-JS Server RenderingFramework Reactivity: React, Vue, Svelte & SolidHTTP/1.1 vs HTTP/2 vs HTTP/3 (QUIC) for Frontend PerformanceDNS Resolution: Path, TTL, Caching & Frontend ImpactCross-Site Scripting (XSS) AttacksCross-Site Request Forgery (CSRF) AttacksCORS Explained: Cross-Origin Resource SharingCORS Preflight in Practice: Credentials, Simple Requests & MisconfigurationsContent Security Policy (CSP)Why is HTTPS Secure? Understanding TLS/SSLAuthorization Best PracticesCookie Security & Session Hardening: SameSite, HttpOnly, Secure
mediumPerformance

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

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.

PropertyStatic Assets (JS/CSS)HTML DocumentsUser Data / APIs
Policypublic, max-age=31536000, immutablepublic, max-age=0, must-revalidateprivate, no-cache or no-store
ReasonHashed filenames + never changes at same URLCoordinates latest asset graphPersonalized 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
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
Previous TopicHow CDNs Work: Edge Delivery, Caching & PerformanceNext Topic Service Workers & Offline Strategy: Cache First, Network First & Update Lifecycle

On this page