DSA & System Design
All the parts

Build · Run it

CDN and load balancer

How do I make my site fast everywhere and survive more than one server?

What it is

A CDN (content delivery network) keeps copies of your files in many cities, so visitors download from one close to them. A load balancer sits in front of several copies of your app and sends each request to a healthy one. A reverse proxy is any server that stands in front of your app and passes requests on, adding things like HTTPS, caching or limits; CDNs and load balancers are both kinds of it.

The CDN is a local branch that stocks popular items, and the load balancer is the host at a restaurant who sends each guest to a free table.

Add it when Visitors are far from your server, images and scripts are heavy, or you run more than one copy of your app.

It can wait when You deploy to a platform that already includes a CDN and handles scaling for you.

1 Which one should I pick?

Answer what you can. The ranking updates as you go, and you can ignore it if you disagree.

Where is your app hosted?
What do you need most?
What matters most right now?

Most people start with

2 Side by side

Three pips is strong, one is weak. Pick a row to read about it below.

OptionQuick to set upCheap while smallEasy to leaveRoom to growPrice
Free tier, then monthly plans
Included with the hosting plan; heavy traffic is billed by use
Pay per hour and per amount of traffic
Free; you pay for the machine

3 Look closer, then wire it in

Managed service

Cloudflare

A CDN and shield in front of your site, set up by changing your DNS.

Pick it when You want caching, free HTTPS and protection from attacks with almost no work.

Skip it if You want everything inside one cloud account, or cannot point your domain's DNS at them.

  • Generous free plan
  • Blocks many bad requests before they reach you
  • Simple dashboard
  • A new layer to debug when something looks wrong
  • Caching rules take care to get right
Quick to set up
Cheap while small
Easy to leave
Room to grow

PriceFree tier, then monthly plans

How to connect it

  1. Add your domain in Cloudflare and switch your nameservers to theirs.
  2. Turn on the proxy (orange cloud) for the record that points to your app.
  3. Set SSL mode to full so traffic is encrypted to your server too.
  4. Add cache rules for static files, and leave pages with private data uncached.
Put these in your .env file
  • CLOUDFLARE_API_TOKEN
  • CLOUDFLARE_ZONE_ID

4 Watch it work

Press play, or step through one message at a time.

Press Play to watch it run · 5 steps

The CDN answers from its copy when it can. If not, the load balancer picks one of your servers.

A request through CDN and load balancerThe CDN answers from its copy when it can. If not, the load balancer picks one of your servers.Get /logo.pngalt [Hit: the CDN has a copy]Served from a city near youGet /api/me (not cacheable)Pass throughServer A is busy, use B
  • Client
  • CDN
  • Load balancer
  • Service
Text description
  1. Browser → CDN: Get /logo.png
  2. CDN replies to Browser: Served from a city near you
  3. Browser → CDN: Get /api/me (not cacheable)
  4. CDN → Load balancer: Pass through
  5. Load balancer → Server B: Server A is busy, use B

5 Mistakes to skip

  • Caching pages that show a user's private data.

    Send Cache-Control: private or no-store on anything personal.

  • Having no health check on the load balancer.

    Add a path like /health so dead servers are skipped.

  • Leaving your origin server open to the internet behind the CDN.

    Allow only the CDN or load balancer to reach it, or attackers will bypass your protection.

See where it sits in a whole app

The stack builder draws your product with cdn and load balancer in it and animates a request through it.

Open the stack builder

Works closely with