CDN Setup & Edge Caching Guide

A well-configured CDN can reduce TTFB from 800ms to <50ms by serving assets from edge nodes close to users. The key is setting the right Cache-Control headers for each asset type and invalidating efficiently on deploy.

Cache-Control Header Recipes

# Static assets with content hash — cache forever
# (JS/CSS/images with [hash] in filename)
Cache-Control: public, max-age=31536000, immutable

# HTML pages — revalidate every time
Cache-Control: public, max-age=0, must-revalidate

# API responses (non-sensitive) — cache 60 seconds
Cache-Control: public, max-age=60, s-maxage=300, stale-while-revalidate=60

# Private data (user-specific) — browser only, no CDN
Cache-Control: private, max-age=300

# Never cache (payments, real-time)
Cache-Control: no-store

# Service worker — always recheck
Cache-Control: no-cache

CDN Provider Comparison

Cloudflare Page Rules Setup

# Cloudflare — via Terraform or API
resource "cloudflare_page_rule" "static_assets" {
  zone_id  = var.zone_id
  target   = "example.com/_next/static/*"
  priority = 1

  actions {
    cache_level       = "cache_everything"
    edge_cache_ttl    = 31536000  # 1 year at edge
    browser_cache_ttl = 31536000  # 1 year in browser
  }
}

resource "cloudflare_page_rule" "html" {
  zone_id  = var.zone_id
  target   = "example.com/*.html"
  priority = 2

  actions {
    cache_level       = "bypass"  # Always revalidate HTML
  }
}

Cache Invalidation on Deploy (CI/CD)

# GitHub Actions: invalidate Cloudflare cache after deploy
- name: Purge Cloudflare cache
  run: |
    curl -X POST "https://api.cloudflare.com/client/v4/zones/$CF_ZONE_ID/purge_cache" \
      -H "Authorization: Bearer $CF_API_TOKEN" \
      -H "Content-Type: application/json" \
      --data '{"files":["https://example.com/","https://example.com/sitemap.xml"]}'
  env:
    CF_ZONE_ID: ${{ secrets.CF_ZONE_ID }}
    CF_API_TOKEN: ${{ secrets.CF_API_TOKEN }}

# AWS CloudFront invalidation
- name: Invalidate CloudFront
  run: |
    aws cloudfront create-invalidation \
      --distribution-id ${{ secrets.CF_DISTRIBUTION_ID }} \
      --paths "/*"

Vercel Edge Config (next.config.js)

// next.config.js — fine-tune Vercel CDN headers
module.exports = {
  async headers() {
    return [
      {
        source: '/_next/static/:path*',
        headers: [{
          key: 'Cache-Control',
          value: 'public, max-age=31536000, immutable',
        }],
      },
      {
        source: '/(.*)',
        headers: [
          { key: 'X-DNS-Prefetch-Control', value: 'on' },
          { key: 'X-Content-Type-Options', value: 'nosniff' },
          { key: 'X-Frame-Options', value: 'SAMEORIGIN' },
        ],
      },
    ];
  },
};