Edge Caching Strategies for React Apps
Use Cache-Control headers, Cloudflare KV, and R2 to cache rendered pages and static assets at the edge.
Cache-Control Headers for Edge Caching
The Cache-Control response header controls how long Cloudflare (and other CDNs) cache your SSR responses. The key directives are: max-age (browser cache), s-maxage (CDN/shared cache duration), and stale-while-revalidate (serve stale content while revalidating in the background).
s-maxage vs max-age
s-maxage is respected by shared caches (CDNs) while max-age is for browser caches. For SSR pages you typically want s-maxage=60 (CDN caches for 60 seconds) and max-age=0 (browser always revalidates), so all users get reasonably fresh content from the edge cache.
All lessons in this course
- What Is Edge Rendering and Why It Matters
- React on Cloudflare Workers with Hono
- Streaming SSR from the Edge
- Edge Caching Strategies for React Apps