Content Delivery Networks (CDNs), Edge Caching, and Cache-Control

A Content Delivery Network (CDN) is a geographically distributed network of proxy servers (Points of Presence / PoPs) and datacenters designed to deliver content (static assets, video streams, API responses) with high availability and low latency by caching data near the end-user.

⚡ Quick Dive

Cache-Control Directives Cheat Sheet

Directive Meaning Use Case
public Response can be cached by any cache (browsers & CDNs) Shared static assets (JS, CSS, images)
private Response is intended strictly for single user (browser only, never CDN) User account dashboards, personalized feeds
no-store Never cache response anywhere (zero disk/RAM persistence) Financial transactions, authentication tokens
no-cache Cache may store response, but must revalidate with origin before serving HTML pages requiring freshness checks
max-age=<sec> Maximum time response is considered fresh by browser Client-side cache duration
s-maxage=<sec> Overrides max-age for shared caches (CDNs only) CDN cache duration
immutable Asset will never change; browser should never revalidate Hashed build assets (bundle.a1b2c3d.js)
stale-while-revalidate Serve stale cache immediately while fetching updated copy in background Zero-latency page updates

📖 Extended Guide

1. Global CDN & Origin Shield Architecture

                                  ┌───────────────────────────┐
                                  │ Client in Tokyo, Japan    │
                                  └─────────────┬─────────────┘
                                                │ (5ms latency)
                                                ▼
┌─────────────────────────────────────────────────────────────┐
│ CDN Edge Point of Presence (PoP Tokyo)                      │
│  - Checks local SSD / RAM Cache                             │
│  - If Cache Hit: Returns 200 OK immediately                 │
└──────────────────────────────┬──────────────────────────────┘
                               │ (Cache Miss)
                               ▼
┌─────────────────────────────────────────────────────────────┐
│ Regional Origin Shield (San Jose, CA)                       │
│  - Consolidates requests from 50 Asian/US PoPs              │
│  - Collapses concurrent requests (Request Collapsing)       │
└──────────────────────────────┬──────────────────────────────┘
                               │
                               ▼ (Single Origin Request)
┌─────────────────────────────────────────────────────────────┐
│ Origin Backend Application Server (AWS us-east-1)           │
└─────────────────────────────────────────────────────────────┘

2. Cache Invalidation & Fingerprinting Strategies

  1. Content Fingerprinting (Best Practice):

    • Append Git commit SHA or content hash to asset filenames: app-8f4b21a.css.
    • Set extreme caching: Cache-Control: public, max-age=31536000, immutable.
    • Deploying updates simply generates a new filename, guaranteeing instant global adoption with zero cache invalidation costs.

  2. Surrogate Keys / Cache Tags:

    • The origin attaches custom tags: Surrogate-Key: product-101 catalog.
    • When product 101 changes in the database, the backend issues an API call to the CDN: PURGE /tags/product-101, instantly clearing cached pages containing that product globally.

3. Conditional Requests & Validation

When cached content expires (max-age elapsed), the client revalidates with the origin:

Client                                                         Origin Server
  │ ─── GET /index.html (If-None-Match: "e3b0c442") ────────► │
  │                                                            │ (Calculates SHA256)
  │ ◄── HTTP/1.1 304 Not Modified ─────────────────────────── │ (Zero body payload transferred!)
  • ETag (Entity Tag): Cryptographic hash of content payload.
  • Last-Modified: Timestamp of last file modification.
⌂ All Guides