Caching • CDN CachingHard⏱️ ~3 min

Dynamic Content Caching with Microcaching and Edge Fragments

Microcaching
Sets extremely short TTL (1-30 seconds) on dynamic responses. During traffic spikes, even 5 seconds cache offloads origin by 80-95% because many users request same URL within that window. Example: news homepage regenerating every 10s cached with s-maxage=10. During breaking news at 10,000 RPS, CDN serves 9,990 RPS from cache, origin handles only ~100 RPS (one per PoP per TTL window).
Fragment Caching
Separates static layout (headers, navigation, CSS, images) from personalized data. Static layout cached for days or months at CDN edge; personalized data fetched via API calls at page load. Result: 90-95% of page bytes (layout) served from CDN in 20-50ms, only small personalized fragments (5-10%) require origin requests. Page loads fast, personalization appears milliseconds later.
Edge Side Includes (ESI)
Markup language allowing CDN to assemble pages from independently cached fragments. Main page cached at edge with ESI tags marking personalized regions. When request arrives, CDN fetches personalized fragments via separate requests, assembles final page. Keeps main page cached while updating only personalized pieces. Trade off: adds assembly latency (10-50ms) but enables high cache hit ratios for mostly static pages with small personalized sections.
When to Use Each
Microcaching: dynamic content that changes every few seconds (news, dashboards). Fragment caching: pages with static shell and personalized widgets (e-commerce product pages, social feeds). ESI: complex pages needing edge assembly (portal pages with multiple personalized sections).

💡 Key Takeaways

✓Microcaching with 1-30s TTL offloads 80-95% during spikes. 10K RPS with 10s TTL = 100 origin requests (one per PoP per window).

✓Fragment caching: static layout (90-95% of bytes) cached for days, personalized data (5-10%) fetched via API at page load.

✓ESI assembles pages from independently cached fragments at edge. Main page cached, personalized regions fetched separately.

✓Trade off: microcaching adds seconds of staleness; fragment caching adds client side complexity; ESI adds assembly latency.

📌 Interview Tips

1Microcaching math: 10K RPS, 100 PoPs, 10s TTL. Each PoP fetches once per 10s = 10 fetches/s per PoP = 1000 total vs 10K without cache.

2Fragment caching: e-commerce page shell (header, nav, footer) cached 24h, personalized recommendations fetched via JS after load.

3ESI tag: <esi:include src="/personalized-header"/> fetches user specific header while main page served from cache.

← Back to CDN Caching Overview