Web caching stores previously fetched resources at various layers (browser, CDN, service worker) to reduce network requests, lower latency, and enable offline access in production applications.
Cache-Control (max-age, no-cache, no-store, immutable) and ETag/Last-Modified control how browsers cache and revalidate resources.
Edge servers worldwide serve cached content from locations nearest to users, controlled by s-maxage and purge strategies.
Cache First, Network First, and Stale While Revalidate are the three core patterns for programmable request interception and offline support.
localStorage, sessionStorage, IndexedDB, and libraries like React Query provide in-memory and persistent caching for application data.
Content-hashed filenames, versioned APIs, TTL-based expiration, and CDN purge APIs are strategies for ensuring users receive fresh content.
Caching is one of the most impactful performance optimizations in web development. A well-designed caching strategy can reduce page load times by 50-90% for returning visitors by eliminating redundant network requests. Understanding the different caching layers and their trade-offs is essential for building fast, reliable web applications.
The browser's built-in cache is controlled by HTTP response headers. The two primary headers are:
Cache-Control: The modern standard. Cache-Control: max-age=31536000, immutable tells the browser to cache the resource for one year and never revalidate. Cache-Control: no-cache means always revalidate with the server before using the cached copy. Cache-Control: no-store means never cache at all (use for sensitive data). stale-while-revalidate serves the stale version immediately while fetching a fresh one in the background.
ETag / Last-Modified: Conditional request headers for revalidation. The server responds with a 304 Not Modified (no body) if the resource has not changed, saving bandwidth. ETags are hash-based and more precise than timestamp-based Last-Modified.
The common pattern for modern apps: HTML pages use no-cache (always check for updates), while hashed static assets (e.g., main.a1b2c3.js) use max-age=31536000, immutable (cache forever, the filename changes when content changes).
Content Delivery Networks cache resources on edge servers distributed worldwide. When a user in Tokyo requests your asset, it is served from a nearby edge server instead of your origin in Virginia. CDNs add their own caching layer with s-maxage (shared cache max-age) and Surrogate-Control headers. Cache invalidation is the hard part — you need strategies for purging stale content when deployments happen.
Service workers are programmable proxy servers that run in the browser. They intercept network requests and can serve responses from a Cache API store, enabling offline functionality and fine-grained caching strategies:
Cache First: Check the cache, fall back to network. Best for static assets that rarely change. Network First: Try the network, fall back to cache. Best for API data that should be fresh. Stale While Revalidate: Serve from cache immediately, then update the cache from the network in the background. Best balance of speed and freshness. Libraries like Workbox simplify implementing these strategies.
Beyond browser mechanisms, applications can cache data in localStorage (persistent, 5-10MB), sessionStorage (per-tab, cleared on close), and IndexedDB (structured data, much larger limits). React Query and SWR provide in-memory request caching with automatic revalidation, deduplication, and stale data management.
Phil Karlton famously said there are only two hard things in computer science: cache invalidation and naming things. Common strategies include content-hashed filenames (automatic invalidation on change), versioned API endpoints, time-based expiration, and manual purge APIs for CDNs.
HTTP caching is automatic and header-driven. Service worker caching is programmable and enables offline access. CDN caching distributes content geographically. Application caching (React Query, SWR) manages API response data in memory. A production app typically uses all four layers together.
Fun Fact
Phil Karlton's famous quote 'There are only two hard things in Computer Science: cache invalidation and naming things' has been extended many times. Martin Fowler added 'and off-by-one errors,' making it three hard things — itself an off-by-one joke.