CDN Explained: How Content Delivery Networks Work
If you've ever wondered why some websites load instantly regardless of where you are in the world, the answer is usually a CDN. Content Delivery Networks are one of the most impactful pieces of infrastructure in modern web development, and understanding them helps you make smarter decisions about how you deploy and serve your sites.
The Problem CDNs Solve
Every website originates from a server in a specific physical location. If your server is in Virginia and a user in Tokyo requests your homepage, that request travels roughly 14,000 kilometers round-trip. At the speed of light through fiber, that's already 90–140ms of latency before a single byte of your HTML is processed. Add TCP handshakes, TLS negotiation, and server processing time, and you're looking at 300–500ms before anything renders.
For a single-origin architecture, there's no escaping the laws of physics. CDNs solve this by replicating your content closer to your users.
How a CDN Works
A CDN operates a global network of servers called Points of Presence (PoPs) or edge nodes. These nodes are located in data centers in major cities worldwide — London, Singapore, São Paulo, Sydney, and dozens more.
When you deploy your website behind a CDN:
- 1Your origin server holds the canonical copy of your files.
- 2The CDN's edge nodes cache copies of those files.
- 3When a user requests your site, their DNS query resolves to the nearest edge node.
- 4If the edge has the file cached (a cache hit), it serves it directly — no origin request needed.
- 5If it's a cache miss, the edge fetches from origin, caches it, and serves the user.
For static files that don't change often — HTML, CSS, JavaScript, images — cache hit rates of 95%+ are common. That Tokyo user gets your homepage from a Singapore edge node, reducing round-trip time from 400ms to 30ms.
What Gets Cached
CDNs cache anything you tell them to via HTTP cache headers:
- HTML pages — especially effective for static sites
- CSS and JavaScript bundles — long-lived with content-hash filenames
- Images, fonts, and video — often cached for days or weeks
- API responses — possible but requires careful cache-key design
For static sites generated by tools like Next.js, Astro, Hugo, or Eleventy, every file is cacheable. The entire site can live at the edge.
CDNs and Static Sites: A Perfect Match
Static sites and CDNs are a natural pair. Because static HTML pages don't require server-side computation, they can be cached indefinitely at every edge node. A static site distributed across a CDN is:
- Fast everywhere — users get files from nearby nodes.
- Resilient — if your origin goes down, the edge continues serving cached content.
- Scalable — a CDN can serve millions of concurrent requests with no configuration.
- Cheap — CDN bandwidth is far cheaper than origin compute.
Cache Invalidation
The classic challenge with CDNs is cache invalidation — how do you update cached content? Two strategies dominate:
Content-hashed filenames: Name your JS/CSS files with a hash of their contents (e.g., app.a3f2c1.js). When content changes, the filename changes, forcing a cache miss. HTML files that reference these assets can then have short or no cache lifetimes.
Purge on deploy: Most CDNs provide an API to purge specific paths or the entire cache on deployment. When you deploy new content, trigger a purge and edges fetch fresh copies.
PandaStack and CDN Delivery
When you deploy a static site on PandaStack, your files are served with CDN-backed delivery, ensuring fast load times for visitors around the world. PandaStack handles the infrastructure — you connect your GitHub repository, configure your buildCommand and outputDir in pandastack.json, and every push triggers a build and deploy.
You don't need to configure CDN rules, set up cache headers manually, or manage purge workflows. PandaStack automates the deploy-and-distribute pipeline from your Git push to the edge.
Get started at [dashboard.pandastack.io](https://dashboard.pandastack.io) and read more in the docs at [docs.pandastack.io](https://docs.pandastack.io).