Netlify CDN Caching PoC

Each page demonstrates a different Netlify caching strategy. The render timestamp proves whether caching is active — if it stays frozen across reloads, the page is cached.

ISR

Durable CDN cache with 60s TTL. Pages are cached on the CDN and revalidated in the background after expiry.

SWR

Server-level stale-while-revalidate with 30s freshness. Stale content is served instantly while a fresh render happens in the background.

Dynamic

No caching at all. Every request triggers a fresh server render. Timestamp changes on every reload.

Static

Prerendered at build time. The HTML is generated once during deployment and served as a static file.

API Route

JSON API endpoint with programmatic Netlify-CDN-Cache-Control headers. Demonstrates API-level caching with 10s TTL.

How to verify

  1. Deploy to Netlify (caching doesn't work on localhost)
  2. Open DevTools → Network tab
  3. Check the Cache-Status response header
  4. "Netlify Edge"; hit = CDN cache hit, miss = fresh render
  5. Reload each page and observe whether the timestamp changes