intermediate

CDN

Cache static and dynamic assets at the edge using cache keys, headers, purge strategy, origin shielding, and stale behavior.

Cloudflare CDN caches responses at edge PoPs using cache keys derived from URL, method, headers, and cookies. For a React or Next.js frontend you cache hashed static assets aggressively while keeping HTML and authenticated API paths dynamic or short-lived.

					Cache-Control: public, max-age=31536000, immutable
# for /assets/app.a1b2c3.js

Cache-Control: private, no-store
# for /api/me or personalized HTML

| Control | Effect | |---------|--------| | `Cache-Control` | Primary browser and edge TTL | | `CF-Cache-Status` | HIT, MISS, EXPIRED, BYPASS | | Page Rules / Cache Rules | Path-specific cache behavior | | Purge | Invalidate by URL, tag, or prefix |

Use cache tags or prefix purge after deploy instead of blanket purges. Origin shield and stale-while-revalidate reduce load spikes.

On interviews: cache key composition, `Vary` headers, purging strategy after JS bundle deploy, dynamic vs static split, and diagnosing MISS storms.

Common pitfalls: caching `Set-Cookie` responses; ignoring query strings in cache keys; purging everything on each deploy; long TTL on HTML that embeds stale API data.

The trade-off is origin offload and latency (long cache) versus freshness, personalization, and invalidation complexity.

Checklist:

Fingerprint static assets; cache them long.
Keep auth and session paths uncached or private.
Automate targeted purge on deploy.
Inspect `CF-Cache-Status` in staging.