A CDN (Content Delivery Network) is a network of servers around the world that stores copies of your website’s files and serves them from the location closest to each user.
Without a CDN, every user hits your single server — which might be in Virginia. A user in Tokyo waits 200ms+ just for the data to travel there and back. With a CDN, that same user gets the files from a server in Tokyo in 20ms.
How it works
- You upload your site to your origin server (or deploy to Vercel, Netlify, etc.)
- The CDN copies your files to “edge” servers worldwide (called PoPs — Points of Presence)
- When a user visits your site, the CDN routes them to the nearest edge server
- The edge server returns the cached files — fast
If the edge server doesn’t have the file yet, it fetches it from your origin server, caches it, and serves it. Next request is instant.
What a CDN caches
- Static files — images, CSS, JavaScript, fonts, videos
- HTML pages — if your site is static (like Astro or Next.js with SSG)
- API responses — some CDNs can cache API responses too
Popular CDNs
| CDN | Notes |
|---|---|
| Cloudflare | Free tier, most popular, also does DNS and security |
| Vercel Edge Network | Built into Vercel deployments |
| AWS CloudFront | Amazon’s CDN, integrates with S3 |
| Fastly | Used by GitHub, Stripe, Reddit |
| Bunny CDN | Cheap, simple, great performance |
CDN vs hosting
Your hosting provider runs your origin server. A CDN sits in front of it:
User → CDN Edge (Tokyo) → [cache hit? return file]
→ [cache miss? fetch from origin server in Virginia]Most modern platforms (Vercel, Netlify, Cloudflare Pages) include a CDN automatically. If you’re self-hosting, you add a CDN like Cloudflare in front of your server.
When you need a CDN
- ✅ Your users are in multiple countries/regions
- ✅ You serve large static files (images, videos)
- ✅ You want faster page loads (better SEO, better UX)
- ✅ You want DDoS protection (CDNs absorb traffic spikes)
- ❌ You only have local users and a fast server nearby
Cache invalidation
The hardest part of using a CDN is cache invalidation — telling edge servers to stop serving stale content when you update something.
Common strategies:
- Cache-busting filenames — append a hash to filenames (
app.a3f2b1.js). When the file changes, the hash changes, so the CDN treats it as a new file. Build tools like Vite and Webpack do this automatically. - TTL (Time to Live) — set how long the CDN should cache a file before checking the origin for updates. Short TTLs mean fresher content but more origin hits.
- Purge API — most CDNs let you manually invalidate specific URLs or entire cache zones via API when you deploy.
Cache-Control: public, max-age=31536000, immutable # Static assets with hash
Cache-Control: public, max-age=60, s-maxage=300 # HTML pages, short cacheCDN security features
Modern CDNs do more than just caching:
- DDoS protection — absorb massive traffic spikes before they reach your server
- WAF (Web Application Firewall) — block malicious requests like SQL injection attempts
- Bot detection — distinguish real users from scrapers and bots
- SSL/TLS termination — handle HTTPS encryption at the edge so your origin doesn’t have to
Cloudflare’s free tier alone blocks billions of threats daily, which is why many developers put it in front of every project regardless of traffic levels.
Setting up Cloudflare (most common)
- Sign up at cloudflare.com
- Add your domain
- Change your nameservers to Cloudflare’s
- Cloudflare automatically proxies and caches your traffic
That’s it. No code changes needed. Your static assets are now served from 300+ locations worldwide.
FAQ
What’s the difference between a CDN and edge computing?
A CDN primarily caches and serves static content (files, images, HTML) from distributed servers. Edge computing goes further by running dynamic code (authentication, personalization, API logic) at those distributed locations. Many CDN providers now offer both — Cloudflare Workers is a CDN that also does edge computing.
Do I need a CDN if I’m using Vercel or Netlify?
No, these platforms include a CDN automatically. When you deploy to Vercel or Netlify, your static assets are already distributed globally across their edge network. You only need to set up a separate CDN if you’re self-hosting on a VPS or bare-metal server.
Can a CDN cache API responses?
Yes, but you need to be careful. CDNs can cache GET requests that return the same data for all users (public data, product listings, blog posts). You should never cache personalized or authenticated responses. Use Cache-Control headers to tell the CDN which responses are safe to cache and for how long.