Stop 18 · Cloud & HostingTopics · 9/11

CDN Setup

In short

Your server is in Mumbai, your user is in Guwahati, and every image makes the full round trip. A CDN keeps copies near users so pages load faster and your server gets a break.

Placing a Content Delivery Network in front of static assets or cacheable API responses so they're served from edge locations near the user instead of your origin server every time.

The purple blob hands out milk packets at a small booth while a van arrives from a faraway dairy.

Think of it like this

The neighbourhood milk booth

The dairy is far outside the city. Nobody drives there for one packet of milk. Small booths in every colony stock fresh packets each morning and hand them over in seconds. A CDN's edge servers are those booths, and your origin server is the dairy.

Watch it happen

Cache miss, then cache hit

User

Edge

Origin

GET /img/hero.webp

1/6The request goes to the nearest edge server, picked by DNS or anycast routing.

The big ideas

What you need to know

Edges near users

CDNs run servers in many cities. Users hit the closest one instead of crossing the country.

Cache-Control decides

Your headers tell the CDN what to cache and for how long. Without them, the CDN may skip caching or guess.

Fingerprint file names

Name builds like app.3f9a1c.js and cache them for a year. A new deploy gets a new name, so nothing goes stale.

A shield for the origin

CDNs soak up traffic spikes and many attacks before they reach your server.

See it in code

Walk through the code

1import express from "express";2const app = express();3 4// Fingerprinted build files never change: cache for a year5app.use("/assets", express.static("dist/assets", {6  immutable: true,7  maxAge: "365d",8}));9 10// API responses: CDN may cache for 60 s, browsers should recheck11app.get("/api/products", async (_req, res) => {12  res.set("Cache-Control", "public, max-age=0, s-maxage=60");13  res.json(await getProducts());14});

1/3Hashed asset files get a one-year cache and are marked as never changing.

The CDN reads these headers from your origin. Most CDNs show a cache status response header so you can see HIT or MISS.

Save yourself the pain

Common mistakes

Oops

Letting the CDN cache responses that contain user-specific data.

Do this instead

The CDN may then show Riya's account page to Arjun. Mark personal responses Cache-Control: private or no-store.

Oops

Deploying new CSS under the same file name with a one-year cache.

Do this instead

Users keep the old file. Use hashed file names, or purge the CDN cache on deploy.

Your mission

Measure a cache hit

~30 min

Quick check

What does s-maxage=60 in a Cache-Control header do?

Go deeper

1Put a CDN (Cloudflare, CloudFront) in front of a set of static assets.
2Learn how CDN caching interacts with the `Cache-Control` headers you set on your responses.
3Understand a CDN can also provide DDoS protection and reduce origin server load.