CDN & Asset Optimization

A content delivery network places cached copies of responses on geographically distributed edge nodes. When a user in Jakarta requests a JavaScript bundle, the response can come from a nearby edge location instead of the origin server in another region. That reduces round-trip latency and protects the origin from repeated asset traffic.

What Belongs On A CDN

Static assets are ideal: JavaScript, CSS, images, videos, fonts, and downloadable files. They are requested often, change rarely, and can be keyed by URL. HTML entry points need more care because they decide which hashed assets the browser loads.

type CachePolicy = {
  pathPattern: string;
  cacheControl: string;
};

export const assetPolicies: CachePolicy[] = [
  {
    pathPattern: "/assets/*",
    cacheControl: "public, max-age=31536000, immutable",
  },
  {
    pathPattern: "/*.html",
    cacheControl: "no-cache",
  },
];

Hashed filenames make long-lived caching safe. If app.4f3a91.js changes, the next build emits a different filename, so users never reuse stale code for a changed asset.

API Edge Caching

Some API responses can also be cached at the edge, especially public GET responses keyed fully by URL. Product catalogs, docs navigation, exchange-rate snapshots, and unauthenticated search suggestions can work well. Per-user dashboards and mutation responses should stay origin-only unless your cache key includes the exact authorization and privacy boundaries.

export function buildPublicApiHeaders(seconds: number): HeadersInit {
  return {
    "Cache-Control": `public, max-age=${seconds}, s-maxage=${seconds}`,
    "Vary": "Accept-Encoding",
  };
}

Cache purging is the escape hatch when an object must be invalidated before its TTL expires. Prefer content hashes for build assets and targeted purge keys for dynamic CDN entries.

Further Learning

Search these terms to go deeper:

• “Cache-Control immutable hashed assets” — safe long-lived browser caching
• “CDN edge caching API responses” — when dynamic responses can live at the edge
• “content hash cache busting” — deployment-safe asset filename strategies
• “CDN cache purge surrogate key” — targeted invalidation for cached objects

CDN & Asset Optimization

A CDN (Content Delivery Network) keeps copies of your files on servers all around the world, so users download them from a location near them instead of from one distant server. A visitor in Jakarta gets your app from a Jakarta server — much faster than reaching across the ocean.

What to put on a CDN

Great for a CDN: your static files — JavaScript, CSS, images, fonts, videos. They’re requested constantly and rarely change, so caching them near users is a huge win.

Be careful with: your HTML page — it’s the file that points to everything else, so you don’t want a stale copy stuck around (more on that below).

Cache the files basically forever (safely)

Here’s the neat part. Modern build tools give each file a hashed name like app.4f3a91.js. When the file’s content changes, the name changes too. So you can tell browsers “cache this forever” without risk — a new version gets a brand-new filename:

/assets/app.4f3a91.js  →  cache for a year (name changes if content changes)
/index.html            →  don't cache aggressively

In one sentence

A CDN serves your files from a server near each user for speed — cache static assets (JS/CSS/images) for a long time using hashed filenames for safe updates, but keep your HTML on a short cache so users always get the latest map.

Want to go deeper?

Switch to Expert mode above for exact Cache-Control headers, edge-caching API responses, and cache purging.