What is a CDN?

A Content Delivery Network (CDN) is a distributed network of servers strategically placed around the world to deliver content to users from the geographically closest location, minimizing latency and improving performance.

Think of it like having warehouse stores in every city instead of one central warehouse across the country.

The Problem: Distance = Latency

User in Tokyo requests image from New York server:

Physical distance: ~11,000 km
Speed of light in fiber: ~200,000 km/s
Minimum latency: 55ms (one way)
Round trip: 110ms+ 

Add processing time: 150-300ms total latency

Click to expand code...

With CDN:

User in Tokyo → Tokyo edge server (same city)
Distance: ~50 km
Latency: ~5-10ms

Click to expand code...

How CDN Works

mermaid

graph TB
    User[👤 User in Tokyo] -->|1. Request| Edge[CDN Edge Server<br/>Tokyo]
    Edge -->|2. Cache Hit?| Check{Has Content?}
    Check -->|Yes| Return[3. Serve from cache<br/>⚡ 10ms]
    Check -->|No| Origin[4. Fetch from Origin<br/>New York Server]
    Origin -->|5. Cache & Return| Edge
    Edge -->|6. Serve to user| User

Click to expand code...

Detailed Flow

User request: User in Tokyo requests example.com/logo.png
DNS resolution: DNS returns CDN edge server IP (Tokyo)
Edge check: Tokyo edge server checks local cache
Cache hit: If found, serve immediately (10ms)
Cache miss: If not found:
- Fetch from origin server (New York)
- Cache locally
- Serve to user
- Future requests served from cache

Push vs Pull CDNs

Push CDN

You manually upload content to CDN servers.

bash

# Example: Upload to CDN
aws s3 sync ./dist s3://my-cdn-bucket --acl public-read

# CloudFront invalidation
aws cloudfront create-invalidation \
  --distribution-id E1234 \
  --paths "/*"

Click to expand code...

When to use:

Small sites with infrequent updates
Static content that rarely changes
Want full control over what's cached

Pros:

Predictable: content only available when you push it
No surprise origin bandwidth costs
Control cache timing precisely

Cons:

Manual workflow
Deployment complexity
Stale content if you forget to update

Examples: Netlify, Vercel deploy-time CDN

Pull CDN (Origin Pull)

CDN automatically fetches content from origin on first request.

nginx

# Origin server configuration
server {
    listen 80;
    server_name origin.example.com;
    
    location / {
        root /var/www;
        # CDN will pull from here
    }
}

Click to expand code...

When to use:

Dynamic sites with frequent updates
Large content libraries
Don't want to manage uploads

Pros:

Zero maintenance
Automatic updates
Scales easily

Cons:

First request is slow (cache miss)
Can overwhelm origin on cache purge
Harder to predict costs

Examples: Cloudflare, AWS CloudFront (default)

Caching Strategies

1. Cache-Control Headers

http

# Origin server response
HTTP/1.1 200 OK
Content-Type: image/png
Cache-Control: public, max-age=31536000, immutable

Click to expand code...

Common patterns:

javascript

// Static assets (never change)
"Cache-Control": "public, max-age=31536000, immutable"
// 1 year cache, never revalidate

// Dynamic content
"Cache-Control": "public, max-age=3600, must-revalidate"
// 1 hour cache, revalidate before serving stale

// Never cache
"Cache-Control": "no-store, no-cache, must-revalidate"

Click to expand code...

2. Cache Busting (Versioning)

html

<!-- Without versioning -->
<link rel="stylesheet" href="/style.css">
<!-- CDN caches for 1 year, updates invisible to users -->

<!-- With versioning -->
<link rel="stylesheet" href="/style.abc123.css">
<!-- New deploy = new filename = new cache entry -->

Click to expand code...

Webpack/Vite auto-versioning:

javascript

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[hash].[ext]'
      }
    }
  }
}

Click to expand code...

3. Purge/Invalidation

bash

# Cloudflare API
curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {token}" \
  -d '{"files":["https://example.com/style.css"]}'

# AWS CloudFront
aws cloudfront create-invalidation \
  --distribution-id E123456789 \
  --paths "/index.html" "/style.css"

Click to expand code...

Cost consideration: CloudFront charges per invalidation (first 1,000/month free)

CDN Architecture

Edge Servers (Points of Presence - PoPs)

Global CDN Network:
- North America: 50+ PoPs
- Europe: 40+ PoPs
- Asia: 35+ PoPs
- South America: 10+ PoPs
- Africa: 5+ PoPs
- Oceania: 5+ PoPs

Total: 150+ locations worldwide

Click to expand code...

Multi-Tier Caching

mermaid

graph LR
    User[User] --> Edge[Edge Server<br/>Tier 1]
    Edge -->|miss| Regional[Regional Server<br/>Tier 2]
    Regional -->|miss| Origin[Origin Server]

Click to expand code...

Benefits:

Tier 1 (Edge): Ultra-low latency, small cache
Tier 2 (Regional): Larger cache, reduces origin load
Origin: Only hit if both tiers miss

Real-World CDN Providers

Cloudflare

javascript

// Cloudflare Workers (Edge computing)
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // Run code at CDN edge
  const cache = caches.default
  let response = await cache.match(request)
  
  if (!response) {
    response = await fetch(request)
    // Cache for 1 hour
    response = new Response(response.body, response)
    response.headers.set('Cache-Control', 'max-age=3600')
    event.waitUntil(cache.put(request, response.clone()))
  }
  
  return response
}

Click to expand code...

Features:

Free tier (unlimited bandwidth!)
DDoS protection
Web Application Firewall (WAF)
Edge computing (Workers)
200+ PoPs

AWS CloudFront

javascript

// CloudFront distribution config
const distribution = new aws.cloudfront.Distribution({
  origins: [{
    domainName: "origin.example.com",
    originId: "myOrigin"
  }],
  defaultCacheBehavior: {
    targetOriginId: "myOrigin",
    viewerProtocolPolicy: "redirect-to-https",
    allowedMethods: ["GET", "HEAD"],
    cachedMethods: ["GET", "HEAD"],
    forwardedValues: {
      queryString: false,
      cookies: { forward: "none" }
    },
    minTTL: 0,
    defaultTTL: 86400,  // 24 hours
    maxTTL: 31536000    // 1 year
  },
  priceClass: "PriceClass_100"  // US, Europe
})

Click to expand code...

Features:

Integration with AWS services
Lambda@Edge (serverless edge functions)
Real-time logs
Geo-restriction

Fastly

vcl

# Fastly VCL (Varnish Configuration Language)
sub vcl_recv {
  # Custom logic at edge
  if (req.url ~ "^/api/") {
    return(pass);  # Don't cache API requests
  }
}

sub vcl_fetch {
  if (beresp.status == 200) {
    set beresp.ttl = 1h;
  }
}

Click to expand code...

Features:

Instant purge (40ms worldwide)
Real-time analytics
Edge computing
Used by: Stripe, GitHub, Shopify

Performance Benefits

Latency Reduction

Without CDN:
User (Sydney) → Server (New York)
Distance: 16,000 km
Latency: 200-300ms

With CDN:
User (Sydney) → Edge (Sydney)
Distance: 50 km
Latency: 5-15ms

Improvement: 95% latency reduction

Click to expand code...

Bandwidth Cost Reduction

Without CDN:
1M requests × 1MB file = 1TB origin bandwidth
Cost: ~$90/TB = $90

With CDN (95% cache hit rate):
50,000 origin requests × 1MB = 50GB origin bandwidth
Cost: ~$4.50

Savings: $85.50 (95% reduction)

Click to expand code...

Origin Server Protection

Traffic spike: 10,000 req/sec

Without CDN:
10,000 req/sec → Origin server
Result: Server crash

With CDN (90% cache hit):
1,000 req/sec → Origin server
9,000 req/sec → Served from cache
Result: Server handles load easily

Click to expand code...

Security Benefits

DDoS Protection

DDoS Attack: 1,000,000 req/sec

CDN behavior:
- Absorb attack at edge (distributed across 200+ PoPs)
- Rate limiting
- Geographic filtering
- Only 5,000 legitimate req/sec → Origin

Origin: Protected, serves normal traffic

Click to expand code...

SSL/TLS Termination

Client ←→ CDN ←→ Origin

HTTPS (encrypted) ←→ HTTPS (edge) ←→ HTTP (internal)

Benefits:
- Free SSL certificates (Let's Encrypt)
- Latest TLS protocols at edge
- Origin doesn't need SSL overhead

Click to expand code...

CDN Use Cases

1. Static Website Hosting

yaml

# Netlify (CDN + hosting)
build:
  publish: dist
  command: npm run build

# Automatically deploys to global CDN

Click to expand code...

2. Video Streaming

javascript

// HLS video streaming via CDN
<video>
  <source src="https://cdn.example.com/video/stream.m3u8" type="application/x-mpegURL">
</video>

// CDN serves video chunks
https://cdn.example.com/video/chunk-001.ts
https://cdn.example.com/video/chunk-002.ts

Click to expand code...

Netflix's CDN: Open Connect (custom CDN in ISP datacenters)

3. Software Distribution

bash

# NPM packages via CDN
<script src="https://cdn.jsdelivr.net/npm/react@18/umd/react.production.min.js"></script>

# Benefits:
# - Browser cache across sites
# - No npm install needed
# - Instant availability

Click to expand code...

4. API Acceleration

javascript

// Cache API responses at edge
app.get('/api/products', (req, res) => {
  res.set('Cache-Control', 'public, max-age=300')  // 5 min
  res.json(products)
})

// CDN caches response for 5 minutes
// Reduces database queries by 99%

Click to expand code...

Interview Tips 💡

When discussing CDNs in system design interviews:

Explain the problem: "Users in Asia experience 300ms latency fetching from US servers..."
Propose CDN: "We'd use a CDN like Cloudflare to cache static assets globally..."
Discuss cache strategy: "Images cached for 1 year with versioned filenames, HTML cached for 5 minutes..."
Mention invalidation: "On deploy, we'd invalidate HTML and CSS via API..."
Security benefits: "CDN provides DDoS protection and WAF as bonus..."
Cost optimization: "95% cache hit rate reduces origin bandwidth by$85/month..."

Related Concepts

Caching Strategies — Cache invalidation and patterns
Load Balancing — Distribute traffic across origins
Reverse Proxy — CDNs are specialized reverse proxies
HTTP Caching — Cache-Control headers
Edge Computing — Running code at CDN edge

About ScaleWiki

ScaleWiki is an interactive educational platform dedicated to demystifying distributed systems, software architecture, and system design. Our mission is to provide high-quality, technically accurate resources for software engineers preparing for interviews or solving complex scaling challenges in production.

Read more about our Editorial Guidelines & Authorship.

Educational Disclaimer: The architectural patterns and system designs discussed in this article are based on common industry practices, technical whitepapers, and public engineering blogs. Actual implementations in enterprise environments may vary significantly based on specific product requirements, legacy constraints, and evolving technologies.

Intermediate

Graph Databases

Complete guide to graph databases treating relationships as first-class citizens, covering property graphs, Cypher query language, graph algorithms, and production implementations in Neo4j, Amazon Neptune powering social networks, fraud detection, and recommendation systems.

DatabaseNoSQLGraph

Beginner

DNS Architecture

The phonebook of the internet. How Domain Name System works, the hierarchy of Route 53, and recursive vs iterative resolution strategies.

NetworkingInfrastructureProtocols

Intermediate

HTTP Evolution (H1 to H3)

From text-based HTTP/1.1 to binary HTTP/2 and UDP-based HTTP/3 (QUIC). Why we needed upgrades and how they solve Head-of-Line Blocking.

NetworkingProtocolsPerformance

What is a CDN?

The Problem: Distance = Latency

How CDN Works

Detailed Flow

Push vs Pull CDNs

Push CDN

Pull CDN (Origin Pull)

Caching Strategies

1. Cache-Control Headers

2. Cache Busting (Versioning)

3. Purge/Invalidation

CDN Architecture

Edge Servers (Points of Presence - PoPs)

Multi-Tier Caching

Real-World CDN Providers

Cloudflare

AWS CloudFront

Fastly

Performance Benefits

Latency Reduction

Bandwidth Cost Reduction

Origin Server Protection

Security Benefits

DDoS Protection

SSL/TLS Termination

CDN Use Cases

1. Static Website Hosting

2. Video Streaming

3. Software Distribution

4. API Acceleration

Interview Tips 💡

Related Concepts

About ScaleWiki

Related Articles

Graph Databases

DNS Architecture

HTTP Evolution (H1 to H3)