How a CDNWhat is cdn?Content Delivery Network - a network of servers around the world that caches your files and serves them from the location closest to the user, making pages load faster. Ask AI for more works

A CDN is a network of servers (Points of Presence or PoPs) distributed globally. Users get content from the nearest PoP.

Without CDN:
  User (Tokyo) ──── 200ms ────▶ Origin (Virginia)

With CDN:
  User (Tokyo) ──── 5ms ────▶ CDN PoP (Tokyo)
                               │
                               │ (cache miss? fetch from origin once)
                               ▼
                             Origin (Virginia)

The flow: DNSWhat is dns?The system that translates human-readable domain names like google.com into the numerical IP addresses computers use to find each other. Ask AI for more resolves to the nearest PoP via anycast routing. On a cache hit, the response returns in 5-20ms. On a cache miss, the PoP fetches from your originWhat is origin?The combination of protocol, domain, and port that defines a security boundary in the browser, like https://example.com:443. Ask AI for more, caches the response, then returns it. Every subsequent nearby request is served from cache.

Cache-Control headers

The Cache-Control HTTPWhat is http?The protocol browsers and servers use to exchange web pages, API data, and other resources, defining how requests and responses are formatted. Ask AI for more header tells CDNs and browsers what to cache and for how long.

Cache-Control: public, max-age=31536000, immutable
│              │                         │
│              │                         └── Don't revalidate even on refresh
│              └── Cache for 1 year (in seconds)
└── Any cache (CDN, browser) can store this

// Express middleware for setting cache headers
app.use('/static', (req, res, next) => {
  // Static assets with hashed filenames: cache forever
  res.set('Cache-Control', 'public, max-age=31536000, immutable');
  next();
});

app.use('/api', (req, res, next) => {
  res.set('Cache-Control', 'no-store');
  next();
});

app.get('/blog/:slug', (req, res) => {
  res.set('Cache-Control', 'public, max-age=600, stale-while-revalidate=60');
  // ...render blog post
});

Cache busting

Include a content hash in filenames so new deployments are new URLs:

Before deploy: /static/app.a1b2c3d4.js  (cached for 1 year)
After deploy:  /static/app.e5f6g7h8.js  (new filename, new cache entry)

Build tools like Vite and Webpack do this automatically.

Edge computing

Traditional CDNs only cache static content. Edge computing runs actual server-side code at CDNWhat is cdn?Content Delivery Network - a network of servers around the world that caches your files and serves them from the location closest to the user, making pages load faster. Ask AI for more locations.

Traditional CDN:
  Static file ──▶ CDN PoP ──▶ User
  (cache only)

Edge Computing:
  Code + data ──▶ CDN PoP ──▶ User
  (runs your logic at the edge)

// Cloudflare Worker: A/B testing at the edge
export default {
  async fetch(request) {
    const url = new URL(request.url);

    const cookie = request.headers.get('Cookie') || '';
    let variant = cookie.includes('ab_variant=B') ? 'B' : 'A';

    if (!cookie.includes('ab_variant')) {
      variant = Math.random() > 0.5 ? 'B' : 'A';
    }

    if (variant === 'B') {
      url.pathname = '/landing-b' + url.pathname;
    }

    const response = await fetch(url.toString());
    const newResponse = new Response(response.body, response);

    newResponse.headers.set(
      'Set-Cookie',
      `ab_variant=${variant}; Path=/; Max-Age=2592000`
    );

    return newResponse;
  }
};

// Vercel Edge Function: geolocation-based routing
import { NextRequest, NextResponse } from 'next/server';

export function middleware(request: NextRequest) {
  const country = request.geo?.country || 'US';

  if (country === 'JP' || country === 'KR') {
    return NextResponse.rewrite(new URL('/api/asia', request.url));
  }
  if (country === 'DE' || country === 'FR') {
    return NextResponse.rewrite(new URL('/api/europe', request.url));
  }

  return NextResponse.next();
}

export const config = { matcher: '/api/:path*' };

CDNWhat is cdn?Content Delivery Network - a network of servers around the world that caches your files and serves them from the location closest to the user, making pages load faster. Ask AI for more and edge platform comparison

When to use edge computing vs originWhat is origin?The combination of protocol, domain, and port that defines a security boundary in the browser, like https://example.com:443. Ask AI for more

Good for edge: authenticationWhat is authentication?Verifying who a user is, typically through credentials like a password or token. Ask AI for more checks, redirects, A/B testing, geolocation routing, header manipulation, simple APIWhat is api?A set of rules that lets one program talk to another, usually over the internet, by sending requests and getting responses. Ask AI for more responses from KV stores, bot detection.

Keep at origin: complex database joins, ML inference, file processing, anything needing more than ~50ms of compute, transactions spanning multiple systems.

Edge environments have limited CPU time (typically 10-50ms), limited memory, and restricted API access. If your logic fits those constraints, put it at the edge.