What Is a CDN? The Complete Guide for AI-Assisted Developers

Why AI Coders Need to Know This

When you ask AI to "deploy my site," it often picks a platform like Vercel, Netlify, or Cloudflare Pages. All three include a CDN automatically. You might already be using one without knowing it. That is fine when everything works — but when your site shows stale content after an update, when images load slowly, or when you need to understand your hosting bill, CDN knowledge becomes essential.

For vibe coders, CDNs matter for three practical reasons:

• Speed. Google uses page load time as a ranking factor. A site without a CDN loads in 800ms for nearby visitors and 3-4 seconds for distant ones. With a CDN, load times are consistently under 500ms worldwide. That directly affects your SEO and user retention.
• Reliability. If your single server goes down, your site goes down. A CDN distributes your content across dozens of servers. Even if one fails, others keep serving.
• Cost. CDNs reduce bandwidth costs by serving cached copies instead of hitting your origin server for every request. For a high-traffic site, this can cut hosting costs by 50-80%.

According to the HTTP Archive, the median webpage is 2.3 MB in 2026. Without a CDN, that 2.3 MB travels from one server location to every visitor worldwide. With a CDN, it travels from the nearest edge server — often within the same country or city as the user.

How a CDN Actually Works

The concept is simple: instead of one server, you have many. Here is the step-by-step process:

1. You deploy your site to an origin server (your VPS, Vercel, Railway, etc.).
2. The CDN has edge servers in cities worldwide: New York, London, Tokyo, Sydney, São Paulo, Mumbai, and dozens more.
3. First visitor from Tokyo requests your homepage. The CDN edge server in Tokyo does not have a cached copy, so it fetches it from the origin server, serves it to the visitor, and saves a copy.
4. Second visitor from Tokyo requests the same page. The edge server already has the cached copy. It serves it instantly — no round trip to the origin.
5. A visitor from London requests the page. The London edge server does the same: fetches from origin on first request, caches it, serves cached copies to subsequent visitors.

This is called "pull-based" caching. The CDN pulls content from your origin server on demand and caches it at the edge. Most modern CDNs work this way.

Real Scenario

You built a portfolio site with Cursor and deployed it to a VPS in Oregon. It loads in 200ms for you in Idaho. Then you share it on Reddit and someone in Germany reports it takes 3.5 seconds. Someone in India says 4 seconds. Your site is fine — the problem is physics. Data takes time to travel across oceans.

My static site is deployed on a VPS in Oregon. It's fast locally but slow
for international visitors. Set up Cloudflare as a CDN:
- Walk me through the DNS setup
- Show me the recommended cache settings
- Explain how to purge the cache when I update the site
- Set up proper cache headers in my nginx config

What AI Generated

Here is the nginx cache configuration the AI would generate for your VPS:

# Cache headers for static assets
location ~* \.(css|js|png|jpg|jpeg|webp|gif|svg|ico|woff2|woff|ttf)$ {
    expires 1y;                          # Browser caches for 1 year
    add_header Cache-Control "public, immutable";
    add_header X-Content-Type-Options "nosniff";
}

# Cache headers for HTML pages
location ~* \.html$ {
    expires 1h;                          # Browser caches for 1 hour
    add_header Cache-Control "public, must-revalidate";
}

# No cache for service worker and manifest
location ~* (sw\.js|manifest\.json)$ {
    expires 0;
    add_header Cache-Control "no-cache, no-store, must-revalidate";
}

And the Cloudflare setup steps:

# Step 1: Add your domain to Cloudflare
# - Sign up at cloudflare.com
# - Add your domain
# - Cloudflare scans your existing DNS records

# Step 2: Update nameservers at your domain registrar
# Change from your registrar's nameservers to:
#   ns1.cloudflare.com
#   ns2.cloudflare.com

# Step 3: Configure cache settings in Cloudflare dashboard
# - Caching > Configuration > Browser Cache TTL: Respect Existing Headers
# - Caching > Configuration > Crawler Hints: On
# - Speed > Optimization > Auto Minify: JavaScript, CSS, HTML

# Step 4: Purge cache after updates
# Via dashboard: Caching > Configuration > Purge Everything
# Via API:
curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/purge_cache" \
  -H "Authorization: Bearer YOUR_TOKEN" \
  -H "Content-Type: application/json" \
  --data '{"purge_everything": true}'

Understanding Each Part

Edge servers vs. origin server

Your origin server is where your files actually live — your VPS, your Vercel deployment, your Netlify build. Edge servers are the CDN's cached copies distributed worldwide. The word "edge" means the network edge — the point closest to the user.

When someone says "edge computing" or "edge functions," they are talking about running code on these distributed servers instead of just serving cached files.

Cache-Control headers

These HTTP headers tell both the CDN and the browser how long to keep a cached copy:

• max-age=31536000 — Cache for 1 year (in seconds). Used for static assets with hashed filenames like app.a1b2c3.js.
• must-revalidate — After the cache expires, check with the origin before serving again. Good for HTML pages that change.
• no-cache — Always check with the origin before serving. The CDN still caches, but verifies freshness every time.
• no-store — Never cache this. Used for sensitive data or highly dynamic content.
• public — CDNs and browsers can cache this. Required for CDN caching.
• immutable — This file will never change. The browser should not even check for updates.

The strategy is: cache static assets aggressively (they have unique filenames), cache HTML pages briefly (they change when you update content), and never cache sensitive API responses.

Cache invalidation (purging)

The hardest problem with CDNs is telling them to serve fresh content after you update your site. This is called cache invalidation. You have three approaches:

1. Purge everything. The nuclear option. Clears all cached files from all edge servers. Simple but wasteful — most files probably did not change.
2. Purge by URL. Clear specific files. Better, but you need to know exactly which files changed.
3. Use cache-busting filenames. The best approach. Build tools like Next.js and Vite add hashes to filenames (app.a1b2c3.js). When the file changes, the hash changes, the filename changes, and the CDN treats it as a new file. Old cached copies expire naturally.

CDN providers for vibe coders

What AI Gets Wrong About CDNs

Not mentioning cache invalidation

AI will set up a CDN and never explain how to clear the cache. You update your site, the CDN keeps serving the old version, and you think your deployment is broken. Always ask: "How do I purge the CDN cache when I deploy updates?"

Caching API responses incorrectly

AI sometimes configures CDN rules that cache API responses (like /api/* routes). If your API returns user-specific data or requires authentication, caching it means User A might see User B's data. API routes should generally have Cache-Control: no-store unless they serve public, non-personalized data.

Wrong Cache-Control values for HTML

AI often sets max-age=31536000 (1 year) on HTML files. This means the browser will serve cached HTML for a year without checking for updates. If you change a page, visitors will not see the update until their cache expires. HTML should use short cache times (minutes to hours) with must-revalidate.

Forgetting the www/apex domain split

When setting up Cloudflare, AI sometimes only configures one version of the domain (www or apex). Both need to go through the CDN, and one should redirect to the other. Missing this means half your traffic bypasses the CDN entirely.

Over-caching during development

AI sets aggressive caching and you cannot see your changes during development. The fix: use a separate development environment that bypasses the CDN, or use Cloudflare's "Development Mode" which temporarily disables caching.

How to Debug CDN Issues With AI

Check response headers

Open DevTools → Network → click on any file → look at response headers. Key headers to check:

• CF-Cache-Status: HIT — Cloudflare served a cached copy (good for static assets)
• CF-Cache-Status: MISS — Cloudflare fetched from origin (first request or cache expired)
• CF-Cache-Status: BYPASS — Cloudflare did not cache this request (check your rules)
• Cache-Control — What caching rules your server sent
• Age — How many seconds ago this copy was cached

Test from different locations

Use tools like WebPageTest.org to test your site from different cities. This shows you whether the CDN is working and how fast the site loads from various locations.

The debugging prompt

I deployed updates to my site but visitors are still seeing the old version.
CDN: [Cloudflare / Vercel / etc.]
Here are the response headers I see: [paste Cache-Control and CDN headers]
How do I force the CDN to serve the updated content?

Performance testing

Before and after adding a CDN, measure with PageSpeed Insights. Key metrics to compare:

• TTFB (Time to First Byte): Should drop significantly — the CDN edge server responds faster than a distant origin.
• LCP (Largest Contentful Paint): Images and fonts load faster from edge servers.
• Total page size: CDNs often compress content (gzip/Brotli) automatically.

CDN Setup for Common Platforms

Vercel (automatic)

Vercel's edge network is a CDN. Every deployment is automatically distributed. Static assets get immutable caching. ISR and server components have configurable cache durations. You do not need to set up anything extra.

Netlify (automatic)

Same idea. Netlify's edge network serves all assets. You can customize caching via _headers file or netlify.toml. Instant cache invalidation on deploy.

VPS + Cloudflare (manual setup)

1. Sign up for Cloudflare (free)
2. Add your domain and follow DNS setup
3. Change nameservers at your registrar
4. Set up proper Cache-Control headers on your nginx/Apache config
5. Configure page rules or cache rules in Cloudflare dashboard
6. Enable "Always Use HTTPS" and "Auto Minify"

This is the typical setup for AI-generated sites deployed to a VPS. Cloudflare sits in front of your server, caches static content, provides free SSL, and absorbs DDoS attacks.

What to Learn Next

• What Is DNS? — CDN setup starts with DNS configuration.
• What Is a VPS? — Understand the origin server a CDN sits in front of.
• What Is Docker? — Container deployments with CDN layers.
• What Are Environment Variables? — CDN API tokens and configuration secrets.

FAQ