Edge Delivery Lesson

CDN

Put static things at the edge first: your frontend app and your images. Then decide, very carefully, whether any API reads should be cached too.

Where It Fits

CDN sits in front of your origin

Best first use: serve your frontend app bundle, HTML shell, CSS, fonts, and static files from the CDN.

Browser

CDN Edge

Origin Front Door

Frontend / App Origin

Image / Static Storage

Cache HTML / JS / CSS

Next requests hit edge

What Goes On It

Put these on the CDN first

Frontend App

JS bundles, CSS, static HTML, fonts, and icons are the first thing most teams should push to a CDN.

Images

Product images, avatars, hero art, and docs screenshots benefit from caching, resizing, and compression at the edge.

Fonts

Fonts are static, reused often, and expensive to re-download. CDN delivery usually pays off immediately.

Docs + Downloads

PDFs, changelogs, installers, and other static files are natural CDN content.

Some GET APIs

Public catalog pages, config, docs metadata, or anonymous read APIs can work if TTL and headers are clear.

Not Everything

Avoid caching user-specific pages, private API responses, and write endpoints unless you really know the invalidation model.

Real Providers

How to use it on a cloud provider

Basic Setup

1Step 1

Pick an origin: static bucket, app load balancer, or image storage.

2Step 2

Put the CDN in front of that origin and map your domain to it.

3Step 3

Set cache rules: long TTL for versioned assets, careful TTL for images, strict rules for APIs.

4Step 4

Invalidate or version files on deploy so users get fresh content without stale cache surprises.

Implementation

How teams make CDN caching real

app.get("/assets/:file", (req, res) => {
  res.setHeader(
    "Cache-Control",
    "public, max-age=31536000, immutable"
  )

  return res.sendFile(req.params.file)
})

CDN