CDN Caching Strategies
Configure CDN cache headers and purge policies for optimal content delivery.
EdgeIntermediate
Why
Proper CDN caching reduces origin load by 90%+ and improves TTFB globally. Cloudflare's edge network spans 330+ cities with sub-50ms p95 latency globally.
Edge functions reduce TTFB by 60-80% compared to origin servers, and Akamai reports 40% of enterprises now use edge compute in 2024.
When
Any site with global audience or significant static assets. Avoid edge functions for stateful logic requiring database writes — edge runtimes have no persistent connection pool.
Skip if you need long-running tasks (>30s) or heavy CPU computation.
How
# Cache headers in next.config.js
async headers() {
return [
{
source: '/_next/static/:path*',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=31536000, immutable' }
]
},
{
source: '/images/:path*',
headers: [
{ key: 'Cache-Control', value: 'public, max-age=86400, s-maxage=2592000' }
]
}
];
}
# Purge cache on deploy
curl -X POST "https://api.vercel.com/v2/deployments/$DEPLOY_ID/files" \
-H "Authorization: Bearer $TOKEN"
4. Verify deployment — curl -I https://your-app.example.com
5. Monitor logs — check for errors in first 5 minutes
6. Rollback if needed — revert to previous version
Example
// config — deploy-cdn-cache
const config = require("./config");
# Cloudflare cache rules (Page Rules)
URL: example.com/api/*
Cache Level: Bypass Cache
URL: example.com/_next/static/*
Cache Level: Cache Everything
Edge Cache TTL: 1 year
Common Problems
- ⚠Cache not purging — use vercel purge or Cloudflare API
- ⚠Over-caching dynamic content — use s-maxage with revalidation
- ⚠Configuration drift between environments — use infrastructure-as-code (Terraform/Pulumi) to keep dev/staging/prod identical
Best Practices
- ✓Use immutable for hashed assets — long cache with no revalidation
- ✓Use stale-while-revalidate — serve stale while fetching fresh
- ✓Set up health checks and graceful shutdown — handle SIGTERM to drain in-flight requests before exit