Caching • CDN CachingHard⏱️ ~3 min
Dynamic Content Caching with Microcaching and Edge Fragments
Dynamic or personalized content historically bypassed CDN caching entirely because each user sees different data. However, modern techniques allow substantial CDN offload even for dynamic pages by caching at very short time scales (microcaching) or separating shared layout from personalized data (fragment caching). Microcaching sets extremely short TTL values (1 to 30 seconds) on otherwise dynamic responses. During traffic spikes, even a 5 second cache window can offload the origin by 80% to 95% because many users request the same URL within that window. For example, a news homepage that regenerates every 10 seconds can be cached with s-maxage equals 10; during a breaking news event driving 10,000 requests per second, the CDN serves 9,990 requests per second from cache and fetches from origin only 100 times (once per 10 second window per edge PoP).
Fragment caching (also called edge-side includes or ESI) splits a page into cacheable and personalized parts. The static layout, navigation, and article content are cached with long TTL at the CDN, while user-specific elements like a shopping cart count or username are fetched separately as JSON from an API and inserted by the browser or edge. This allows 90% to 95% of page bytes to be served from CDN cache with year-long TTL, while the remaining 5% to 10% (user fragment) comes from origin or a separate fast personalized API. Amazon product pages use a variant of this: static product images, descriptions, and reviews are CDN cached, while "Recommended for you" and cart data are fetched client side via API after the main page loads, achieving sub-100 millisecond page loads globally with high CDN byte hit ratios.
For fully dynamic content that cannot be fragmented, edge rendering offers another path. Platforms like Cloudflare Workers or AWS Lambda at Edge run JavaScript at CDN PoPs to generate HTML per request, often aggregating data from multiple backend APIs. This keeps dynamic logic close to users (reducing latency) while still offloading origin servers. However, edge compute introduces cost (typically 10x to 100x more expensive per request than simple caching) and complexity (debugging distributed code). The tradeoff is worthwhile for high-margin or latency-sensitive applications (for example, personalized financial dashboards, real-time recommendation engines) but overkill for low-margin content. Combining microcaching, fragment patterns, and selective edge compute allows systems to cache 70% to 90% of traffic that would traditionally bypass CDN entirely.
💡 Key Takeaways
•Microcaching with 1 to 30 second TTL offloads origin by 80% to 95% during traffic spikes; a 5 second cache window on a homepage reduces origin requests from 10,000 per second to 100 per second (one per edge PoP per TTL window)
•Fragment caching separates static layout (cached for days or months) from personalized data (fetched via API), allowing 90% to 95% of page bytes to be CDN served while only user-specific fragments hit origin
•Amazon product pages cache static content (images, descriptions, reviews) with long TTL while fetching personalized recommendations client-side via API, achieving sub-100 millisecond initial page loads and 85%+ byte hit ratios
•Edge rendering with compute platforms (Cloudflare Workers, Lambda at Edge) runs dynamic logic at CDN PoPs, reducing latency by 50 to 150 milliseconds but costs 10x to 100x more per request than simple caching
•Revalidation with ETag on microcached content returns HTTP 304 (headers only) when content unchanged, reducing payload from megabytes to kilobytes while still refreshing frequently (for example, every 10 seconds)
•Combining techniques can cache 70% to 90% of traditionally uncacheable dynamic traffic; for example, a news site microcaches homepage (10 seconds), long-caches static assets (1 year), and fetches user session via cookie-based API
📌 Examples
A news site sets s-maxage equals 5 on its homepage during a breaking story; with 200 edge PoPs globally, origin serves 200 requests per 5 seconds (40 per second) instead of 12,000 requests per second from users, a 99.7% reduction
An e-commerce site splits product pages: static HTML and images cached 7 days with fingerprinted URLs, user-specific cart count fetched via JavaScript API call (bypasses CDN); page loads in 80 milliseconds with 92% byte hit ratio
A financial dashboard uses Cloudflare Workers to aggregate three backend API calls at the edge, rendering personalized HTML in 120 milliseconds total versus 400 milliseconds if the browser made three sequential API calls across continents