Overview
Caching at every layer of the stack — HTTP headers, CDN edges, service workers, and client-side storage APIs.
Caching & Storage
Caching is one of the highest-leverage performance tools available — and one of the most common sources of hard-to-diagnose bugs. Serving stale data, busting the wrong cache layer, or missing an offline scenario entirely are all caching failures. This section covers the mechanisms at each layer and how they interact.
The section follows the request lifecycle outward: HTTP headers first, then CDN edge, then the client-side network proxy, then structured client storage, and finally what happens when the network disappears entirely.
What's Covered
HTTP Caching Strategies — Cache-Control directives in depth: max-age vs s-maxage for split browser/CDN TTLs, stale-while-revalidate for latency-free background refresh, stale-if-error for resilience under origin failure, immutable for content-hashed assets, and no-cache vs no-store — the most commonly confused directives. Also covers ETag conditional requests, the Vary header and why Vary: Cookie disables CDN caching, React cache() for request-level deduplication, and Next.js fetch cache options.
Cache Invalidation Strategies — TTL, tag-based on-demand, event-driven webhooks, and stale-while-revalidate — each suited to different freshness requirements. Next.js revalidateTag vs revalidatePath and when to use each. Next.js 15's use cache directive with cacheTag and cacheLife presets. Thundering herd prevention with TTL jitter, CDN request coalescing, and proactive cache warming. Webhook HMAC signature verification before invalidation.
CDN Cache Purging — URL-based, wildcard, and tag/surrogate-key purging. Cloudflare Cache-Tag API and Fastly Surrogate-Key with soft vs hard purge semantics. Vercel Edge Network's integrated revalidateTag that purges both the Next.js Data Cache and edge layer simultaneously. Origin shields to prevent post-purge stampedes. Purge-on-deploy CI pipeline patterns. Browser cache as the layer CDN purging cannot reach.
Service Worker Lifecycle Traps — The install → waiting → activating → controlling sequence and every phase's failure modes. event.waitUntil(), self.clients.claim(), and the skipWaiting + prompt-to-reload pattern. Workbox strategy classes (CacheFirst, NetworkFirst, StaleWhileRevalidate, NetworkOnly) as the production alternative to hand-rolled caching. Navigation preload for eliminating SW startup latency. Periodic Background Sync for keeping content fresh without user interaction.
IndexedDB — The browser's structured storage database with async transactions, secondary indexes, compound indexes, and cursor-based pagination. The idb wrapper for Promises and TypeScript type safety. Transaction auto-commit trap with await inside a transaction. versionchange blocking handler. Storage mechanism comparison: localStorage, sessionStorage, IndexedDB, Cache API, OPFS, and cookies — when each is correct. navigator.storage.estimate() and navigator.storage.persist() for quota management.
Monorepo Tooling
Structuring and scaling a monorepo with pnpm workspaces and Turborepo — the workspace:* protocol, pnpm catalogs, Turborepo task pipelines, --affected filtering, remote cache self-hosting, and the most common configuration mistakes.
HTTP Caching Strategies
Cache-Control directives, ETag conditional requests, stale-while-revalidate and stale-if-error, Vary headers, s-maxage vs max-age, and Next.js fetch caching — with the exact combinations that prevent stale-data bugs.