CDN and Edge Computing: Global Content Delivery and Cache Management

User in Tokyo
    ↓ (long distance, high latency)
    ↓ (multiple network hops)
    ↓ (single origin server in Virginia)
    ↓ Response travels back same long path
User receives response after 500-1000ms

User in Tokyo
    ↓
    ↓ (requests go to nearest PoP)
    ↓
Tokyo PoP (has cached content)
    ↓
User receives response in ~50-100ms

Meanwhile, if Tokyo PoP doesn't have content:
Tokyo PoP
    ↓ (requests from origin)
    ↓
Origin Server (Virginia)
    ↓ (response cached in Tokyo PoP)
Tokyo PoP now has content for future requests

1. User requests content (image, HTML, API response)
   ↓
2. DNS lookup resolves to nearest CDN PoP
   ↓
3. User connects to edge server
   ↓
4. Edge server checks cache
   ├─ Cache Hit → Serve cached content (fast, ~100ms)
   └─ Cache Miss → Fetch from origin (slower, ~500-1000ms)
   ↓
5. If cache miss, edge server fetches from origin
   ↓
6. Response cached at edge server with TTL
   ↓
7. Next request for same content hits cache

Traditional CDN:
Cache Hit → Serve from edge (fast)
Cache Miss → Go to origin (slow)

Edge Computing:
Cache Hit → Serve from edge (fast)
Cache Miss + Can run at edge → Execute function at edge (fast)
Cache Miss + Can't run at edge → Go to origin (slow)

Edge Servers (execute code):
├─ Process requests before reaching origin
├─ Modify requests (add headers, authentication)
├─ Transform responses (compress, personalize)
├─ Handle authentication/authorization
├─ A/B testing logic
├─ Geolocation-based routing
└─ Much closer to users (low latency)

vs

Origin Server (traditional):
└─ Far from most users (high latency)

// Cloudflare Worker example
export default {
  async fetch(request, env) {
    // Extract JWT from cookie
    const token = request.headers.get('cookie')?.match(/token=([^;]+)/)?.[1];
    
    if (!token) {
      return new Response('Unauthorized', { status: 401 });
    }
    
    // Verify JWT at edge (no origin call needed)
    try {
      const decoded = await verifyJWT(token, env.JWT_SECRET);
      
      // Add user info to request for origin
      const newRequest = new Request(request, {
        headers: {
          'X-User-ID': decoded.userId,
          'X-User-Role': decoded.role
        }
      });
      
      return fetch(newRequest); // Now forward to origin
    } catch (err) {
      return new Response('Invalid token', { status: 401 });
    }
  }
};

// Vercel Edge Function example
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent');
  const path = request.nextUrl.pathname;
  
  // A/B test: New checkout flow for 10% of users
  if (path.startsWith('/checkout')) {
    const variant = Math.random() > 0.9 ? 'new' : 'old';
    
    if (variant === 'new') {
      // Route to new checkout component
      const response = NextResponse.rewrite(
        new URL('/checkout-v2', request.url)
      );
      response.headers.set('X-AB-Test', 'checkout-v2');
      return response;
    }
  }
  
  // Consistent variant per user
  const cookie = request.cookies.get('ab-test');
  if (cookie) {
    const response = NextResponse.next();
    response.headers.set('X-AB-Test', cookie.value);
    return response;
  }
}

// Cloudflare Worker example
export default {
  async fetch(request) {
    const country = request.headers.get('cf-ipcountry');
    const deviceType = request.headers.get('sec-ch-ua-mobile') === '?1' 
      ? 'mobile' 
      : 'desktop';
    
    // Personalized homepage path
    const personalizedPath = `/homepage-${country}-${deviceType}`;
    
    // Try personalized cache first
    const personalizedResponse = await caches.default.match(personalizedPath);
    if (personalizedResponse) {
      return personalizedResponse;
    }
    
    // Fall back to generic homepage
    const response = await fetch(request);
    return response;
  }
};

// Verify request format before origin
export default {
  async fetch(request) {
    // Only allow specific methods
    if (!['GET', 'POST', 'PUT', 'DELETE'].includes(request.method)) {
      return new Response('Method not allowed', { status: 405 });
    }
    
    // Validate content-type for POST
    if (request.method === 'POST') {
      const contentType = request.headers.get('content-type');
      if (!contentType?.includes('application/json')) {
        return new Response('Invalid content type', { status: 400 });
      }
      
      // Parse and validate body
      try {
        const body = await request.json();
        
        // Reject if too large
        if (JSON.stringify(body).length > 10000) {
          return new Response('Request too large', { status: 413 });
        }
        
        // Validate required fields
        if (!body.email || !body.password) {
          return new Response('Missing required fields', { status: 400 });
        }
      } catch (err) {
        return new Response('Invalid JSON', { status: 400 });
      }
    }
    
    // Forward valid requests
    return fetch(request);
  }
};

// Compress and optimize responses
export default {
  async fetch(request) {
    const response = await fetch(request);
    
    // Clone response to modify
    const newResponse = response.clone();
    
    // Add security headers
    const headers = new Headers(newResponse.headers);
    headers.set('X-Content-Type-Options', 'nosniff');
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Strict-Transport-Security', 'max-age=31536000');
    
    // Cache longer for static assets
    if (request.url.endsWith('.js') || request.url.endsWith('.css')) {
      headers.set('Cache-Control', 'public, max-age=31536000');
    }
    
    return new Response(newResponse.body, {
      status: newResponse.status,
      statusText: newResponse.statusText,
      headers: headers
    });
  }
};

// Route users to nearest regional server
export default {
  async fetch(request, env) {
    const country = request.headers.get('cf-ipcountry');
    
    const regions = {
      'US': 'https://us-api.example.com',
      'EU': 'https://eu-api.example.com',
      'APAC': 'https://apac-api.example.com'
    };
    
    let origin = regions['US']; // default
    
    if (['DE', 'FR', 'GB', 'IT', 'ES'].includes(country)) {
      origin = regions['EU'];
    } else if (['JP', 'AU', 'SG', 'CN', 'IN'].includes(country)) {
      origin = regions['APAC'];
    }
    
    const url = new URL(request.url);
    url.hostname = new URL(origin).hostname;
    
    return fetch(new Request(url, request));
  }
};

// Rate limiting at edge
const rateLimitMap = new Map();

export default {
  async fetch(request) {
    const clientIP = request.headers.get('cf-connecting-ip');
    const now = Date.now();
    
    const limit = rateLimitMap.get(clientIP) || { count: 0, resetAt: now + 60000 };
    
    // Reset if window expired
    if (now > limit.resetAt) {
      limit.count = 0;
      limit.resetAt = now + 60000;
    }
    
    limit.count++;
    rateLimitMap.set(clientIP, limit);
    
    // Allow 100 requests per minute per IP
    if (limit.count > 100) {
      return new Response('Too many requests', { 
        status: 429,
        headers: { 'Retry-After': '60' }
      });
    }
    
    return fetch(request);
  }
};

// Example responses with different cache strategies

// Cache for 1 hour, cacheable by CDN and browsers
GET /api/articles
Cache-Control: public, max-age=3600

// Don't cache, always fetch fresh
GET /api/user/profile
Cache-Control: no-cache, no-store

// Cache in browser only, not CDN
GET /static/user-avatar.jpg
Cache-Control: private, max-age=86400

// Cache with revalidation
GET /api/products
Cache-Control: public, max-age=300
ETag: "33a64df551…"
// Browser asks: Is this still fresh?
// Server: Yes (304 Not Modified) or sends new version

// When deploying new version, purge all cached content
const purgeAll = async () => {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/purge_cache`,
    {
      method: 'POST',
      headers: {
        'X-Auth-Email': CF_EMAIL,
        'X-Auth-Key': CF_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ purge_everything: true })
    }
  );
  return response.json();
};

// Only purge affected paths
const selectivePurge = async (paths) => {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/purge_cache`,
    {
      method: 'POST',
      headers: {
        'X-Auth-Email': CF_EMAIL,
        'X-Auth-Key': CF_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ 
        files: paths.map(p => `https://example.com${p}`)
      })
    }
  );
  return response.json();
};

// Usage: Purge specific paths when content changes
selectivePurge([
  '/api/products',
  '/api/articles',
  '/homepage'
]);

// Static assets with hash in filename
// app-a1b2c3d4.js - includes hash of content
// When content changes, hash changes, old version stays cached forever
// New version gets new filename

// In HTML
<script src="/js/app-a1b2c3d4.js"></script> <!-- cached forever -->

// After deploy with new code
<script src="/js/app-x9y8z7w6.js"></script> <!-- new version -->

// Benefits:
// - Browsers cache old version indefinitely
// - New version gets separate cache entry
// - No "purge everything" needed
// - Instant updates for users

// Add cache tags to responses
export default {
  async fetch(request) {
    const response = await fetch(request);
    
    // Tag response with logical groups
    response.headers.set('Cache-Tag', 'products,homepage,articles');
    
    return response;
  }
};

// Purge all responses tagged with 'products'
const tagPurge = async (tag) => {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/purge_cache`,
    {
      method: 'POST',
      headers: {
        'X-Auth-Email': CF_EMAIL,
        'X-Auth-Key': CF_API_KEY,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ 
        tags: [tag]
      })
    }
  );
  return response.json();
};

// When products update, purge all product-tagged content
await tagPurge('products');

// Removes ALL cached content across entire CDN
// Use sparingly - expensive operation

const purgeAll = async () => {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/purge_cache`,
    {
      method: 'POST',
      headers: { /* credentials */ },
      body: JSON.stringify({ purge_everything: true })
    }
  );
  return response.json();
};

// Impact:
// - All cached content removed immediately
// - Next 100,000 requests all hit origin
// - Origin receives traffic spike
// - Slower responses for users (cache misses)
// - High CDN API cost

// Only remove affected content
// Much better for performance

const selectivePurge = async (paths) => {
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/purge_cache`,
    {
      method: 'POST',
      headers: { /* credentials */ },
      body: JSON.stringify({ 
        files: paths.map(p => `https://example.com${p}`)
      })
    }
  );
  return response.json();
};

// Example: Blog post update
selectivePurge([
  '/blog/my-post',
  '/api/blog-posts',
  '/api/recent-posts',
  '/sitemap.xml'
]);

// Impact:
// - Only affected content removed
// - Other cached content still served
// - Users experience normal performance
// - Origin handles only changed content

// Database update triggers cache purge
const updateProduct = async (productId, data) => {
  // Update database
  const product = await db.products.update(productId, data);
  
  // Purge related caches
  const paths = [
    `/api/products/${productId}`,
    `/api/products`,
    `/product/${productId}`,
    `/api/categories/${product.categoryId}`,
    '/sitemap.xml'
  ];
  
  await selectivePurge(paths);
  
  return product;
};

// Purge cache every night at 2 AM
// Ensures fresh content for morning traffic

import cron from 'node-cron';

// Every day at 2 AM
cron.schedule('0 2 * * *', async () => {
  console.log('Running scheduled cache purge...');
  
  const paths = [
    '/api/homepage',
    '/api/featured-products',
    '/latest-news'
  ];
  
  await selectivePurge(paths);
  console.log('Cache purge complete');
});

// Track cache hit ratio
const monitorCache = async () => {
  // Cloudflare Analytics
  const response = await fetch(
    `https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/analytics/dashboard`,
    {
      headers: { /* credentials */ }
    }
  );
  
  const data = await response.json();
  
  return {
    cacheHitRatio: data.result.timeseries[0].cache_hit_ratio,
    totalRequests: data.result.timeseries[0].requests.total,
    cachedRequests: data.result.timeseries[0].requests.cached
  };
};

// Dashboard displays:
// - Cache hit ratio (target: 80%+)
// - Cache miss reasons
// - Top purged URLs
// - Origin latency
// - Edge latency

Blog website
├─ Static HTML pages → CDN
├─ Images → CDN
├─ CSS/JS → CDN with long TTL
└─ Comments → Cached API response

E-commerce platform
├─ Product images → CDN
├─ Product listings → CDN (short TTL)
├─ Shopping cart → Origin (user-specific)
├─ Checkout → Edge function (auth + validation)
└─ Admin dashboard → Edge function (auth only)

User Request
    ↓
Edge Function (authentication, validation, routing)
    ├─ Request valid + can serve from cache?
    │   ↓
    │   Cache (static content, API responses)
    │   ↓
    │   Return to user (fast)
    │
    └─ Request valid + cache miss?
        ↓
        Origin Server
        ↓
        Cache result if appropriate
        ↓
        Return to user

// Static assets - cache forever (use versioning)
app.use('/static', (req, res) => {
  res.set('Cache-Control', 'public, max-age=31536000, immutable');
  // ... serve files
});

// API responses - short TTL
app.get('/api/data', (req, res) => {
  res.set('Cache-Control', 'public, max-age=300');
  res.json(data);
});

// User-specific - don't cache
app.get('/api/profile', (req, res) => {
  res.set('Cache-Control', 'private, no-cache, no-store');
  res.json(userProfile);
});

// Build tool (webpack, esbuild) adds hash
build: {
  output: {
    filename: 'js/[name].[contenthash:8].js',
    assetFilename: 'assets/[name].[contenthash:8][ext]'
  }
}

// Results in:
// app.a1b2c3d4.js (cached forever)
// app.x9y8z7w6.js (new version after deploy)
// No manual purge needed

// Pre-warm cache before deploy
const warmCache = async () => {
  const urls = [
    '/api/products',
    '/api/categories',
    '/api/featured',
    '/',
    '/about',
    '/contact'
  ];
  
  for (const url of urls) {
    await fetch(`https://example.com${url}`);
  }
};

// Run after deploy to populate edge caches

// Good: Simple, fast logic
export default {
  async fetch(request) {
    if (request.method !== 'GET') {
      return new Response('Method not allowed', { status: 405 });
    }
    return fetch(request);
  }
};

// Avoid: Heavy computation
export default {
  async fetch(request) {
    // DON'T: Complex ML inference
    // DON'T: Long database queries
    // DON'T: Large file processing
  }
};

// Cloudflare provides useful headers
export default {
  async fetch(request) {
    const headers = {
      country: request.headers.get('cf-ipcountry'),
      timezone: request.headers.get('cf-timezone'),
      colo: request.headers.get('cf-ray'),
      device: request.headers.get('sec-ch-ua-mobile'),
      asn: request.headers.get('cf-asn')
    };
    
    // Use for routing, personalization, analytics
    return fetch(request);
  }
};

// Edge functions can also cache results
export default {
  async fetch(request) {
    // Check edge cache
    const cached = await caches.default.match(request);
    if (cached) return cached;
    
    // Process request
    const response = await fetch(request);
    
    // Cache response for 5 minutes
    response.headers.set('Cache-Control', 'public, max-age=300');
    caches.default.put(request, response.clone());
    
    return response;
  }
};

Problem code (no cache busting)
<script src="/js/app.js"></script>

Solution: Add hash
<script src="/js/app.a1b2c3d4.js"></script>

After deploy with changes
<script src="/js/app.x9y8z7w6.js"></script>

// 1. Reduce TTL
res.set('Cache-Control', 'public, max-age=60'); // 1 minute instead of 1 hour

// 2. Use ETag for conditional requests
res.set('ETag', `"${hash(content)}"`);

// 3. Add Vary header for content differences
res.set('Vary', 'Accept-Encoding, User-Agent');

// 4. Purge on data change
updateData(id, newData);
await selectivePurge([`/api/data/${id}`]);

// 1. Use gradual purge (don't purge everything at once)
const gradualPurge = async (paths) => {
  for (const path of paths) {
    await selectivePurge([path]);
    await new Promise(r => setTimeout(r, 100)); // 100ms between purges
  }
};

// 2. Pre-warm cache after purge
const purgeAndWarm = async (paths) => {
  await selectivePurge(paths);
  
  // Wait for purge to complete
  await new Promise(r => setTimeout(r, 5000));
  
  // Pre-warm cache
  for (const path of paths) {
    await fetch(`https://example.com${path}`);
  }
};

// 3. Use stale-while-revalidate
res.set('Cache-Control', 'public, max-age=300, stale-while-revalidate=3600');
// Serves stale content while fetching fresh version

User Request
    ↓
GeoDNS Router
    ├─ North America → Cloudflare PoP
    ├─ Europe → Fastly PoP
    ├─ Asia-Pacific → AWS CloudFront
    └─ South America → Akamai PoP

Benefits:
- Vendor independence (no single point of failure)
- Optimized routing per region
- Competitive pricing (play CDNs against each other)
- Best-of-breed features from each provider

Example GeoDNS configuration:

// Using route53 for multi-CDN routing
const route53Config = {
  'api.example.com': {
    'us-*': 'cloudflare.example.com',           // US users
    'eu-*': 'fastly.example.com',               // EU users
    'ap-*': 'aws.example.com',                  // Asia-Pacific
    'sa-*': 'akamai.example.com'                // South America
  }
};

Without Origin Shield:
User 1 in New York → CDN PoP (cache miss)
                  ↓
                Origin (100ms)
                  
User 2 in New York → CDN PoP (cache miss) 
                  ↓
                Origin (100ms)

Result: Multiple cache misses, origin overloaded

With Origin Shield:
User 1 in New York → CDN PoP (cache miss)
                  ↓
            Origin Shield (consolidates requests)
                  ↓
                Origin (100ms)
                  
User 2 in New York → CDN PoP (cache miss)
                  ↓
            Origin Shield (returns cached from previous request)

Result: Fewer origin requests, better cache hit ratio

// Instead of:
res.set('Cache-Control', 'public, max-age=300');
// After 5 minutes, users get cache miss

// Use:
res.set('Cache-Control', 'public, max-age=300, stale-while-revalidate=3600');
// After 5 minutes, serve stale content while fetching fresh
// After 1 hour total, force fresh fetch

// Timeline:
// 0-300s: Serve cached, up-to-date
// 300-3600s: Serve cached (stale), revalidate in background
// 3600s+: Force fresh fetch

// Benefits:
// - Users always get response immediately
// - Origin doesn't receive thundering herd
// - Content freshness within reasonable window
// - Significantly improved perceived performance

// GET /api/products → Always cacheable
app.get('/api/products', (req, res) => {
  // Cache for 5 minutes
  res.set('Cache-Control', 'public, max-age=300');
  res.json(products);
});

// POST /api/products → Never cacheable
app.post('/api/products', (req, res) => {
  res.set('Cache-Control', 'no-cache, no-store');
  // Create product
});

// GET /api/products/:id → Cacheable but invalidate on update
app.get('/api/products/:id', (req, res) => {
  res.set('Cache-Control', 'public, max-age=3600');
  res.set('Cache-Tag', `product-${req.params.id}`);
  res.json(product);
});

// GraphQL queries are POST requests - not cached by default
// Solution 1: Use persistent queries (pre-defined queries)
app.get('/api/graphql/:queryId', (req, res) => {
  // Map queryId to pre-defined query
  const query = persistentQueries[req.params.queryId];
  
  // Execute and cache
  res.set('Cache-Control', 'public, max-age=300');
  res.json(executeQuery(query));
});

// Solution 2: Automatic persisted queries
app.post('/api/graphql', (req, res) => {
  const hash = hashQuery(req.body.query);
  
  // Check cache first
  const cached = await cache.get(hash);
  if (cached) {
    res.set('Cache-Control', 'public, max-age=300');
    return res.json(cached);
  }
  
  // Execute and cache
  const result = executeGraphQL(req.body);
  cache.set(hash, result, 300);
  res.json(result);
});

// Bad: API changes break caches
GET /api/products → Returns different schema over time

// Good: Version API, cache independently
GET /api/v1/products → Schema stable, cached forever
GET /api/v2/products → New schema, new cache

// In code:
app.get('/api/v1/products', (req, res) => {
  res.set('Cache-Control', 'public, max-age=31536000'); // 1 year
  res.set('ETag', '"v1-schema"');
  res.json(products);
});

app.get('/api/v2/products', (req, res) => {
  res.set('Cache-Control', 'public, max-age=600'); // 10 min
  res.set('ETag', '"v2-schema"');
  res.json(products);
});

// ❌ Wrong - Caches sensitive data
app.get('/api/user/credit-card', (req, res) => {
  // This gets cached!
  res.json(user.creditCard);
});

// ✅ Correct - Explicitly prevent caching
app.get('/api/user/credit-card', (req, res) => {
  res.set('Cache-Control', 'private, no-cache, no-store');
  res.set('Pragma', 'no-cache');
  res.json(user.creditCard);
});

// Always use HTTPS for CDN connections
// CDN encrypts traffic from user to edge
// Also encrypt traffic from edge to origin

// Edge function forcing HTTPS:
export default {
  async fetch(request) {
    if (!request.url.startsWith('https://')) {
      const url = new URL(request.url);
      url.protocol = 'https:';
      return Response.redirect(url.toString(), 301);
    }
    return fetch(request);
  }
};

// Set security headers at edge (fast, consistent)
export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    
    // Security headers
    headers.set('X-Content-Type-Options', 'nosniff');
    headers.set('X-Frame-Options', 'DENY');
    headers.set('X-XSS-Protection', '1; mode=block');
    headers.set('Strict-Transport-Security', 'max-age=31536000; includeSubDomains');
    headers.set('Content-Security-Policy', "default-src 'self'");
    
    // CORS
    headers.set('Access-Control-Allow-Origin', 'https://trusted.com');
    headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT');
    headers.set('Access-Control-Allow-Credentials', 'true');
    
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: headers
    });
  }
};

// Don't store API keys in client-side cache
// Use edge functions as proxy

// Client code (safe - no key exposure)
fetch('/api-proxy/external-service', {
  method: 'GET'
});

// Edge function (has secret key)
export default {
  async fetch(request, env) {
    if (request.url.includes('/api-proxy/')) {
      const externalUrl = extractUrl(request.url);
      
      // Add API key at edge (never exposed to client)
      const newRequest = new Request(externalUrl, {
        headers: {
          'X-API-Key': env.EXTERNAL_API_KEY
        }
      });
      
      return fetch(newRequest);
    }
  }
};

// Protection before requests reach origin
export default {
  async fetch(request, env) {
    const clientIP = request.headers.get('cf-connecting-ip');
    const key = `rate-limit:${clientIP}`;
    
    // Get current count from cache
    const count = await env.CACHE.get(key) || 0;
    
    if (count > 1000) {
      return new Response('Too many requests', { 
        status: 429,
        headers: { 'Retry-After': '60' }
      });
    }
    
    // Increment counter
    await env.CACHE.put(key, count + 1, { expirationTtl: 60 });
    
    // Request is safe, forward to origin
    return fetch(request);
  }
};

// Monitor via CDN analytics dashboard
metrics = {
  cacheHitRatio: 85,        // Target: 80%+
  averageLatency: 75,       // ms
  p95Latency: 150,          // ms
  p99Latency: 300,          // ms
  originLatency: 200,       // ms (requests hitting origin)
  edgeLatency: 40            // ms (cached requests)
};

// Alert if cache hit ratio drops below 70%
if (metrics.cacheHitRatio < 70) {
  sendAlert('Low cache hit ratio - investigate TTL strategy');
}

// Track CDN usage for cost optimization
usage = {
  bandwidthOut: '50 GB',
  requestsPerDay: 10000000,
  uniqueIPs: 500000,
  topPaths: [
    { path: '/images/logo.png', requests: 2000000, bytes: 10 },
    { path: '/api/products', requests: 1000000, bytes: 500 },
    { path: '/css/main.css', requests: 1500000, bytes: 50 }
  ]
};

// Log cache behavior from edge functions
export default {
  async fetch(request, env) {
    const startTime = Date.now();
    const url = new URL(request.url);
    
    // Check cache
    const cached = await caches.default.match(request);
    const cacheHit = !!cached;
    
    const response = cached || (await fetch(request));
    const responseTime = Date.now() - startTime;
    
    // Log analytics
    await env.ANALYTICS.write({
      timestamp: new Date().toISOString(),
      path: url.pathname,
      cacheHit: cacheHit,
      responseTime: responseTime,
      status: response.status,
      country: request.headers.get('cf-ipcountry'),
      userAgent: request.headers.get('user-agent')
    });
    
    return response;
  }
};

// Analyze patterns
SELECT 
  path,
  COUNT(*) as requests,
  SUM(CASE WHEN cacheHit THEN 1 ELSE 0 END) / COUNT(*) as hitRatio,
  AVG(responseTime) as avgTime,
  PERCENTILE(responseTime, 0.95) as p95Time
FROM analytics
WHERE timestamp > NOW() - INTERVAL '24 hours'
GROUP BY path
ORDER BY requests DESC

// More cache hits = lower costs
// Increase TTL where possible
GET /api/static-config
Cache-Control: public, max-age=86400  // 1 day

// Instead of
GET /api/static-config
Cache-Control: public, max-age=300    // 5 minutes
// Results in 288x more origin requests (288x higher cost)

// Compression reduces bandwidth costs significantly

// In Node.js
const compression = require('compression');
app.use(compression());

// Typical reduction:
// - HTML: 70% reduction
// - JSON API: 60% reduction
// - JavaScript: 65% reduction
// Result: 3x less bandwidth transferred

// Cloudflare automatically enables brotli compression

// Images are 50%+ of bandwidth costs

// Bad: Serve full-size images
<img src="/images/product-full.jpg" />
// 5MB per image × 100K requests = 500 GB

// Good: Serve optimized images
<img 
  src="/images/product-large.webp"   // WebP format
  srcset="
    /images/product-small.webp 800w,
    /images/product-medium.webp 1200w,
    /images/product-large.webp 1600w
  "
/>
// 200KB + 400KB + 800KB = 1.4MB vs 5MB (72% savings)

// Or use responsive image service (Imgix, Cloudinary)
<img src="https://cdn.imgix.net/path/image.jpg?w=800&q=70&auto=format" />
// Auto-formats and compresses

// Smaller objects = lower costs

// API response bloat
{
  "products": [
    {
      "id": 1,
      "name": "Product",
      "description": "Very long description...", // Not needed
      "htmlDescription": "<html>...</html>",    // Not needed
      "internalNotes": "...",                   // Not needed
      "price": 99.99
    }
  ]
}

// Optimized response
{
  "products": [
    {
      "id": 1,
      "name": "Product",
      "price": 99.99
    }
  ]
}

// Result: 70% smaller response, proportional cost savings

// Don't cache everything - focus on high-volume paths

// Cache these (high volume, low change):
GET /api/products             // 100K req/day
GET /api/categories           // 50K req/day
GET /images/*                 // 500K req/day

// Don't cache these (low volume, user-specific):
GET /api/user/cart           // 10K req/day
GET /api/user/profile        // 15K req/day

// Result: Cache handles 85% of traffic with 15% of infrastructure cost

// Analyze current traffic
const analysis = {
  totalBandwidth: '500 GB/month',
  averageLatency: 350,      // ms
  topContent: [
    { type: 'Images', percent: 45 },
    { type: 'API', percent: 25 },
    { type: 'JavaScript', percent: 15 },
    { type: 'CSS', percent: 10 },
    { type: 'HTML', percent: 5 }
  ],
  userGeography: {
    'US': 40,
    'EU': 30,
    'APAC': 20,
    'Other': 10
  }
};

Decision matrix:

Small site (0-100K requests/day):
→ Use Cloudflare (best value, easy setup)

Growing platform (100K-1M requests/day):
→ Use Fastly or AWS CloudFront

High-performance needs:
→ Use Fastly + optional edge functions

Enterprise (1M+ requests/day):
→ Multi-CDN strategy with Akamai + others

// Update DNS to point to CDN
// Old: example.com A 203.0.113.1 (your server)
// New: example.com CNAME cdn.provider.com

// Set cache headers
app.use((req, res) => {
  if (req.path.match(/\.(js|css|jpg|png|gif|svg)$/)) {
    res.set('Cache-Control', 'public, max-age=31536000');
  } else if (req.path.startsWith('/api')) {
    res.set('Cache-Control', 'public, max-age=300');
  } else {
    res.set('Cache-Control', 'public, max-age=3600');
  }
});

# Test from different locations
curl -I https://example.com
# Check for X-Cache headers

# Monitor latency improvements
# Before CDN: 350ms average
# After CDN: 80ms average (77% improvement)

# Monitor cache hit ratio
# Target: 85%+ cache hit ratio
# Below 70%: Review TTL strategy