CDN (Content Delivery Network)
A CDN is a globally distributed network of servers that serves static files - images, CSS, JS, fonts, video - from the location closest to each user. The result: lower latency, faster page loads, and far less pressure on your origin server.
What It Is and How It Works
A CDN works by copying (caching) static content from your origin server to many edge servers - also called Points of Presence (PoPs) - spread across different geographic regions. When a user makes a request, DNS routes that request to the nearest edge server rather than all the way to the origin.
Basic request flow:
- A user requests
natecue.com/image.jpg - DNS resolves the request to the nearest edge server (not the distant origin)
- If the edge server has the file cached - it returns it immediately (cache hit)
- If not - it fetches from origin, caches the result, then serves it (cache miss)
What a CDN typically serves:
- Static assets: images, CSS, JavaScript, fonts, video
- Static HTML (when using an SSG like Astro)
- API responses (with edge caching configured)
- Streaming media
Popular CDN providers:
- Cloudflare - generous free tier, built-in DNS and WAF
- Vercel Edge Network - automatically included when you deploy on Vercel
- AWS CloudFront - enterprise-grade, deeply integrated with S3 and EC2
- Bunny.net - affordable and well-suited for media-heavy sites
Why You Should Use One
Dramatically faster load times: Latency that was once hundreds of milliseconds can drop to tens of milliseconds. This matters especially when your origin server is in the US or EU but your users are in Southeast Asia or elsewhere.
Reduced origin server load: With 90%+ of requests handled at the edge, your origin only has to deal with dynamic logic - not serving the same image file a thousand times.
Automatic high availability: If one edge node goes down, traffic is automatically rerouted. Uptime improves without any extra effort on your part.
Built-in security: Many CDNs include DDoS protection and WAF (Web Application Firewall). Cloudflare in particular is known for the depth of its security layer.
Bandwidth savings: The origin only transmits content once to the CDN. The CDN handles all distribution from there.
Perfect for static sites: When you deploy an Astro or Next.js static export, the entire site can run on CDN infrastructure - no backend server needed at all.
Things to Keep in Mind
Cache invalidation is genuinely one of the harder problems in web development. When you update a file, you need to either purge the cached version or use content hashing in your build tool (Vite and webpack both do this automatically - filenames include a hash, so every update produces a unique URL).
A CDN is not the right tool for highly dynamic or real-time content. If you need WebSockets or frequently changing server-side data, a CDN layer won’t help much - and may cause stale data issues if misconfigured.
Always set proper Cache-Control headers on your assets so the CDN knows how long to hold onto each file.
FAQ
Do I need a CDN if I'm already on Vercel or Netlify?
Both Vercel and Netlify deploy your site through their own edge networks by default - so you already have CDN-like behavior out of the box. You don’t need to configure a separate CDN for most use cases. Adding Cloudflare on top is still common for extra security features or custom caching rules.
What's the difference between a CDN and a reverse proxy?
A reverse proxy sits in front of your backend and routes requests - it may cache content but its primary job is request handling and load balancing. A CDN is specifically designed for content distribution at global scale, with edge nodes in many cities. In practice, Cloudflare acts as both simultaneously.
Is Cloudflare's free tier enough for a personal site or small project?
For most personal sites and small projects, yes. Cloudflare’s free plan includes unlimited CDN bandwidth, DDoS protection, and basic WAF rules. The main limitations are around advanced analytics and custom firewall rules, which most small sites don’t need.
What happens if the CDN serves a stale version of my file after I update it?
This is the cache invalidation problem. The safest solution is content hashing - your build tool (Vite, webpack) appends a hash to each filename. When the file changes, the hash changes, the URL changes, and the CDN treats it as a new file. Alternatively, you can manually purge the cache through your CDN’s dashboard or API after each deploy.
NateCue