Caching Strategies — System Design Interview Guide

The Caching Layers (Closest to Furthest from User)

1. Memory Cache

The fastest cache — assets already downloaded and held in browser memory for the current session. Zero network requests. Evicted when the browser tab closes.

2. Disk Cache (Browser HTTP Cache)

The HTTP cache stores responses based on Cache-Control headers. This is the most important cache layer to understand.

# Static assets with content hashes — cache forever
Cache-Control: public, max-age=31536000, immutable
# ^ bundle.abc123.js — if the hash is in the filename, the URL changes on update

# HTML pages — always revalidate
Cache-Control: no-cache
# ^ "no-cache" does NOT mean "don't cache" — it means "revalidate before using"
# ^ "no-store" means "never cache" — completely different

# API responses — short cache
Cache-Control: public, max-age=60, stale-while-revalidate=300

Key directives: max-age = serve from cache for N seconds. stale-while-revalidate = after max-age, serve stale while fetching fresh in background. immutable = never revalidate (for content-hashed files). no-store = never cache. private = CDN cannot cache, only browser.

3. Service Worker Cache

A JavaScript worker that intercepts network requests and can respond from a programmable cache. Enables offline support and fine-grained caching strategies per resource type.

// Service worker — cache-first strategy for static assets
self.addEventListener('fetch', (event) => {
  if (event.request.destination === 'image') {
    event.respondWith(
      caches.match(event.request).then((cached) =>
        cached ?? fetch(event.request).then((response) => {
          caches.open('images-v1').then((cache) => cache.put(event.request, response.clone()));
          return response;
        })
      )
    );
  }
});

Common strategies: Cache-first (static assets), Network-first (API calls), Stale-while-revalidate (semi-dynamic), Network-only (auth), Cache-only (offline fallback).

4. CDN (Content Delivery Network)

A globally distributed network of proxy servers that cache responses at edge locations near users. The CDN respects Cache-Control: public directives from your origin server. Reduces latency from 200ms (cross-continent) to 10ms (local PoP).

Cache invalidation: The hardest problem. Strategies: content hashing (file.abc123.js, never needs invalidation), cache-busting query params (?v=2), and CDN purge APIs for emergency invalidation.

stale-while-revalidate — The Best of Both Worlds

The browser (or CDN) serves the stale cached response immediately, then revalidates in the background. The user sees instant response; the cache is fresh for the next request.

Cache-Control: max-age=60, stale-while-revalidate=300
# Serve from cache for 60s. Between 60-300s, serve stale + revalidate.
# After 300s: wait for network response.

// React Query implements the same pattern at the app level
const { data } = useQuery({
  queryKey: ['posts'],
  staleTime: 60_000,   // treat as fresh for 60s
  gcTime: 300_000,     // keep in memory for 5 min after unmount
});