cdn-architecture

What this skill does

# CDN Architecture

Comprehensive guide to Content Delivery Network architecture - caching, distribution, and edge optimization patterns.

## When to Use This Skill

- Designing CDN strategies for web applications
- Implementing cache hierarchies
- Optimizing origin load and performance
- Understanding cache invalidation patterns
- Selecting CDN providers and features
- Configuring edge caching rules

## CDN Fundamentals

### How CDNs Work

```text
Without CDN:
User (Tokyo) ───────────────────► Origin (New York)
              2000km, ~200ms RTT

With CDN:
User (Tokyo) ──► Edge (Tokyo) ──► Origin (New York)
              <10km, ~10ms RTT    (only on cache miss)

CDN Benefits:
├── Reduced latency (content served from nearby)
├── Origin offload (fewer requests hit origin)
├── DDoS protection (distributed, absorbs attacks)
├── Scalability (handles traffic spikes)
└── Reliability (multiple POPs for redundancy)
```

### CDN Architecture

```text
CDN Components:

┌─────────────────────────────────────────────────────────┐
│                     Internet                             │
└────────────────────────┬────────────────────────────────┘
                         │
         ┌───────────────┼───────────────┐
         │               │               │
    ┌────▼────┐    ┌────▼────┐    ┌────▼────┐
    │  Edge   │    │  Edge   │    │  Edge   │
    │ POP 1   │    │ POP 2   │    │ POP 3   │
    │(Tokyo)  │    │(London) │    │(NY)     │
    └────┬────┘    └────┬────┘    └────┬────┘
         │               │               │
         └───────────────┼───────────────┘
                         │
              ┌──────────▼──────────┐
              │    Origin Shield    │
              │    (Mid-tier)       │
              └──────────┬──────────┘
                         │
              ┌──────────▼──────────┐
              │       Origin        │
              │    (Your servers)   │
              └─────────────────────┘

Terminology:
- POP: Point of Presence (edge location)
- Edge: Servers closest to users
- Origin Shield: Optional intermediate cache
- Origin: Your actual servers
```

### Cache Hit/Miss Flow

```text
Request Flow:

1. User requests asset.js

2. Edge Cache Check
   ┌─────────────────────────────┐
   │ Is asset.js in edge cache? │
   └─────────────┬───────────────┘
                 │
        ┌────────┴────────┐
        │                 │
   HIT: Return        MISS: Forward
   immediately        to origin shield
   (~10ms)

3. Origin Shield Check (if configured)
   ┌─────────────────────────────┐
   │ Is asset.js in shield?     │
   └─────────────┬───────────────┘
                 │
        ┌────────┴────────┐
        │                 │
   HIT: Return        MISS: Forward
   to edge            to origin
   (~50ms)

4. Origin Fetch
   ┌─────────────────────────────┐
   │ Fetch from origin server   │
   │ Cache in shield and edge   │
   └─────────────────────────────┘
   (~200ms)

Key Metrics:
- Cache Hit Ratio (CHR): % of requests served from cache
- Time To First Byte (TTFB): Latency to receive first byte
- Origin Requests: Number of requests reaching origin
```

## Caching Strategies

### Cache-Control Headers

```text
Cache-Control Directives:

Browser + CDN:
Cache-Control: public, max-age=31536000
└── Cacheable by anyone for 1 year

CDN Only:
Cache-Control: private, no-store
└── Don't cache (sensitive data)

Short-term Cache:
Cache-Control: public, max-age=300, s-maxage=3600
└── Browser: 5 min, CDN: 1 hour

Stale-While-Revalidate:
Cache-Control: public, max-age=3600, stale-while-revalidate=86400
└── Serve stale for 24h while revalidating in background

CDN-Specific Headers:
CDN-Cache-Control: max-age=3600
Surrogate-Control: max-age=3600
Cloudflare-CDN-Cache-Control: max-age=3600
```

### Caching Decision Matrix

```text
Content Type → Caching Strategy:

Static Assets (JS, CSS, images):
├── Long TTL (1 year)
├── Content-based filename (hash)
├── Immutable flag
└── Cache-Control: public, max-age=31536000, immutable

HTML Pages:
├── Short TTL or no-cache
├── Revalidation-based
├── ETag/Last-Modified
└── Cache-Control: no-cache (revalidate every time)

API Responses (public data):
├── Short to medium TTL
├── Vary by appropriate headers
├── Consider stale-while-revalidate
└── Cache-Control: public, max-age=60, stale-while-revalidate=300

API Responses (personalized):
├── Don't cache at CDN
├── May cache at browser with auth
└── Cache-Control: private, no-store

User-Generated Content:
├── Medium TTL
├── Consider purge on update
└── Cache-Control: public, max-age=3600
```

### Vary Header

```text
Vary Header Usage:

Purpose: Cache different versions based on request headers

Vary: Accept-Encoding
└── Cache separate gzip vs brotli vs plain versions

Vary: Accept-Language
└── Cache separate versions per language
└── WARNING: Can explode cache variations

Vary: Cookie
└── Usually means "don't cache at CDN"
└── Every unique cookie = different cache entry

Best Practices:
✓ Vary: Accept-Encoding (always for compressible content)
✓ Vary: Origin (for CORS)
✗ Avoid Vary: Cookie (fragments cache badly)
✗ Avoid Vary: User-Agent (thousands of variants)

Alternative to Vary:
- Normalize headers at edge
- Use query parameters instead
- Separate URLs for different variants
```

## Origin Shielding

### Shield Architecture

```text
Without Origin Shield:

Edge POPs: 200+ locations
    │ │ │ │ │ │ │ │ │ │
    └─┴─┴─┴─┴─┴─┴─┴─┴─┘
              │
    All 200 POPs can request from origin
              ▼
         ┌────────┐
         │ Origin │  (200 potential requesters on cache miss)
         └────────┘

With Origin Shield:

Edge POPs: 200+ locations
    │ │ │ │ │ │ │ │ │ │
    └─┴─┴─┴─┴─┴─┴─┴─┴─┘
              │
    All edge misses go to shield
              ▼
    ┌─────────────────┐
    │  Origin Shield  │  (1 shield per region)
    │   (Collapsed)   │
    └────────┬────────┘
             │
    Only shield requests from origin
             ▼
         ┌────────┐
         │ Origin │  (1-3 potential requesters)
         └────────┘

Benefits:
- Collapses cache misses
- Reduces origin load
- Better cache efficiency
- Improved origin availability
```

### Request Collapsing

```text
Request Collapsing (Coalescing):

Scenario: 100 users request same uncached asset simultaneously

Without Collapsing:
100 requests ──► Edge ──► 100 requests ──► Origin
                         (thundering herd)

With Collapsing:
100 requests ──► Edge ──► 1 request ──► Origin
                  │
            99 requests wait
                  │
            Response cached, all 100 served

Implementation:
- First request triggers origin fetch
- Subsequent requests for same URL wait
- All requests served from single origin response
- Critical for protecting origin on cache miss spikes
```

## Cache Invalidation

### Invalidation Strategies

```text
Strategy 1: TTL-Based Expiration
└── Let content expire naturally
└── Simple, predictable
└── Delay in propagating changes

Strategy 2: Purge (Immediate Invalidation)
└── Remove specific URLs from cache
└── Fast update propagation
└── Can be expensive at scale

Strategy 3: Soft Purge (Stale-While-Revalidate)
└── Mark content as stale
└── Serve stale while fetching fresh
└── Best user experience

Strategy 4: Versioned URLs
└── Change URL when content changes
└── No purging needed
└── Best cache efficiency
└── asset.js?v=abc123 or asset.abc123.js

Strategy 5: Cache Tags (Surrogate Keys)
└── Tag content with identifiers
└── Purge by tag instead of URL
└── Powerful for related content
└── Purge all "product-123" tagged content
```

### Versioning Patterns

```text
URL Versioning:

Pattern 1: Query Parameter
/styles.css?v=1.2.3
/styles.css?v=a1b2c3d4 (hash)
+ Simple to implement
- Some CDNs don't cache query strings by default

Pattern 2: Filename Hash
/styles.a1b2c3d4.css
+ Best cache efficiency
+ CDNs cache by default
- Requires build process

Pattern 3: Path Versioning
/v1.2.3/styles.css
+ Clear version organization
- May have many versions to purge

Rec