Featured Developer Sponsor • Zero-Token Protection
RFC 9111 HTTP Caching
Stale-While-Revalidate
Request Collapsing
Surrogate-Keys / Tags
CDN Edge Caching, Cache-Control & Invalidation Architecture Studio
Architect enterprise content delivery networks and edge caching topologies: simulate Cache-Control lifecycles (s-maxage, stale-while-revalidate, stale-if-error), model cache stampede thundering herd locking, inspect surrogate-key purge graphs, analyze Cloudflare vs Fastly vs CloudFront pricing and hit ratios, and synthesize production Varnish VCL and Nginx configs.
94.5%
Cache Hit Ratio (CHR)
18.9x
Origin Traffic Offload
$8,460
Monthly Egress Savings
8 ms
Global Edge P95 Latency
Interactive Edge Cache Timeline & Revalidation Simulator
Adjust cache directives and slide the elapsed time ticker to observe edge status transitions.
Generated Header:
Cache-Control: public, max-age=30, s-maxage=120, stale-while-revalidate=60, stale-if-error=86400
0s (Fresh Cache)
s-maxage: 120s
SWR Window: 180s
Expired (> 180s)
Simulated Edge HTTP Response Inspection:
CF-Cache-Status: HIT
HTTP Status: 200 OK
Response Latency: 5 ms (Edge RAM Hit)
Age Header: Age: 90
Background Worker: None (Asset Fresh)
Origin Egress: 0 bytes (Shielded)
User Experience: Instant page render
Cache Stampede (Dog-Piling / Thundering Herd) Mitigation
Examine what occurs when a heavily requested asset expires under a 20,000 req/sec traffic surge:
Without Request Collapsing (Failure State)
- Cache expires at
T=120.000s. - 20,000 incoming requests arrive within 1 second.
- Every request registers a cache MISS simultaneously.
- CDN PoP dispatches 20,000 simultaneous TCP connections to the origin.
- Origin database pool (max 100 connections) is instantly exhausted.
- Origin CPU spikes to 100%, kernel drops SYN packets, and cascading 503/504 errors trigger a complete outage.
With Edge Request Collapsing (Resilient State)
- Cache expires at
T=120.000s. - Edge detects multiple concurrent misses on key
uri_hash. - Edge acquires an in-memory mutex lock: exactly 1 request is sent to origin.
- The remaining 19,999 client requests are placed into a local waiting queue on the edge socket.
- Origin processes exactly 1 query and returns 200 OK in 45ms.
- Edge broadcasts the response to all 19,999 waiting clients, completely neutralizing the stampede.
Nginx & Varnish Request Collapsing Directives:
In Nginx, enable
proxy_cache_use_stale updating; and proxy_cache_lock on;. In Varnish VCL, utilize set beresp.grace = 1h;. This ensures that even while a fresh asset is being fetched from the origin, clients continue receiving stale content in 5ms without queuing.
Surrogate-Keys (Fastly) & Cache-Tags (Cloudflare)
Model multi-dimensional tag-based cache purging. Notice how changing an inventory count invalidates only the specific affected pages globally without dropping entire site caches:
HTTP/2 200 OK
Content-Type: text/html; charset=UTF-8
Cache-Control: public, s-maxage=604800, stale-while-revalidate=86400
Surrogate-Key: product-8492 category-laptops brand-apple warehouse-dallas
Cache-Tag: product-8492,category-laptops,brand-apple,warehouse-dallas
Simulate Instant API Tag Invalidation
Select a tag to trigger an instant global edge purge:
Purge status: Ready. Select a tag above to simulate.
Soft Purge vs Hard Purge
- Hard Purge (Immediate Wipe): Evicts the asset immediately from all PoP SSDs. The very next user request suffers a cold origin fetch (200ms+ latency).
- Soft Purge (Mark Stale): Marks the asset as expired immediately, but retains it in memory. When the next request arrives, the CDN serves the cached copy in 5ms and kicks off an asynchronous background fetch to the origin. Zero user latency spike!
CDN Egress Cost, Bandwidth & Cache Hit Ratio (CHR) Calculator
Quantify monthly cloud egress savings, origin server fleet reduction, and latency improvements:
Calculated Architecture & Financial Impact
Origin Traffic Without CDN
100.0 TB
Origin Traffic With CDN
6.0 TB
Origin Bill Without CDN
$9,216 / mo
New Total Monthly Bill
$553 / mo
Net Monthly Savings
$8,663 / mo
Origin Server Downsizing
16 nodes → 1 node
Production CDN & Reverse Proxy Configurations
// Select an artifact above
Frequently Asked Technical Questions
What is the exact semantic difference between max-age, s-maxage, and stale-while-revalidate in Cache-Control?+
The Cache-Control header dictates caching behavior across both private (browser) and shared (CDN/proxy) intermediate caches: (1) max-age= specifies the maximum time an asset is considered fresh by client browsers and downstream caches. (2) s-maxage= (shared max-age) explicitly overrides max-age ONLY for public shared caches like CDNs (Cloudflare, Fastly, CloudFront, Akamai) and reverse proxies (Nginx, Varnish), allowing origin servers to enforce a long cache TTL at the CDN edge (e.g. s-maxage=86400) while keeping client browser caches short (e.g. max-age=60) so emergency updates propagate quickly. (3) stale-while-revalidate= defines a grace period after s-maxage expires during which the CDN edge immediately serves the stale cached asset to the client in ~5ms, while simultaneously dispatching an asynchronous background request to the origin to fetch fresh data. This completely shields end users from origin latency.
How does stale-if-error shield client traffic during complete origin server outages?+
stale-if-error= directs CDN edge nodes to serve expired/stale cached content if the origin server responds with HTTP 500, 502, 503, 504 status codes, network socket timeouts, or TCP connection resets. For example, with Cache-Control: public, s-maxage=3600, stale-if-error=86400, if an origin database crashes or an application deployment fails, the CDN edge intercepts the 502/504 error and serves the last known valid 200 OK version of the page for up to 24 hours. The edge adds a Warning: 110 "Response is Stale" header, maintaining 99.999% uptime for website visitors while backend engineers remediate the origin incident.
What is a Cache Stampede (Thundering Herd / Dog-Piling) and how do request collapsing and mutex locking prevent it?+
A Cache Stampede occurs when a heavily requested, un-cached or newly expired asset (e.g. an API endpoint receiving 25,000 requests/second) triggers simultaneous cache misses across thousands of concurrent client connections. All 25,000 requests bypass the cache and hit the origin database simultaneously, overwhelming CPU, saturating database connection pools, and causing cascading HTTP 503 outages. Modern CDNs and reverse proxies mitigate this via Request Collapsing (also known as Request Coalescing or proxy_cache_lock): the edge node detects identical in-flight cache misses, permits only ONE upstream request to proceed to the origin, and queues the remaining 24,999 requests on the edge socket. When the single origin response returns, the edge broadcasts the response to all waiting clients and populates the cache.
How do Surrogate-Keys and Cache-Tags enable targeted, sub-second global cache invalidation?+
Traditional CDN cache purging relied on explicit URL paths (e.g. PURGE /products/1234) or wildcards, which fail when an updated resource affects hundreds of disparate URLs (product pages, category listings, search results, RSS feeds). Surrogate-Keys (Fastly) and Cache-Tags (Cloudflare) solve this by allowing origin servers to attach arbitrary semantic identifiers in HTTP response headers (e.g. Surrogate-Key: product-1234 category-laptops brand-apple). The CDN indexes these tags in a distributed hash table. When product inventory changes, the origin issues an API purge for tag "product-1234": the CDN instantly invalidates all pages tagged with that key across all global edge PoPs in under 150 milliseconds, without flushing unrelated catalog pages.
Why can the Vary header drastically degrade CDN Cache Hit Ratios if configured incorrectly?+
The Vary header instructs caches that an asset representation differs based on incoming client request headers (e.g. Vary: Accept-Encoding). A separate cache entry is stored for every unique combination of headers listed in Vary. If an origin server naively emits Vary: User-Agent, because there are tens of thousands of unique browser User-Agent strings, the CDN creates thousands of fragmented cache variants for the same URL, reducing the Cache Hit Ratio (CHR) from 95% down to < 5% and sending almost every request to the origin. Best practice mandates strictly limiting Vary to Accept-Encoding (gzip, br, zstd) and normalizing headers at the CDN edge before cache key lookup.
What is Tiered Caching (Origin Shielding) and why is it necessary for global multi-PoP CDNs?+
A global CDN consists of 300+ Point of Presence (PoP) edge data centers worldwide. Without tiered caching, a cache miss on an asset at a PoP in Tokyo, another in Frankfurt, and another in São Paulo will each make independent upstream requests to the origin, multiplying origin load by the number of PoPs. Tiered Caching (Cloudflare Tiered Cache, AWS CloudFront Origin Shield, Fastly Origin Shielding) introduces an intermediate caching layer: regional edge PoPs route cache misses to a designated upper-tier shield PoP located close to the customer origin. The shield PoP aggregates misses and fulfills requests from its local cache, reducing origin request volume by 80% to 95% compared to direct edge-to-origin architectures.
Sponsored Utility
While You're Here
Sponsored Recommendations
Advertisement