Edge Caching vs. Browser Caching

Balancing blazingly fast zero-latency load times with fresh data.

Internet5 min readConcept 23 of 35

What it is

**Edge Caching (CDN Level)**: A shared cache located on geographically distributed servers closer to end-users. It intercepts requests before they reach the origin server, serving the same cached asset to multiple users.

**Browser Caching (Local Level)**: A private cache stored locally on the user's device. It eliminates network requests entirely on repeat visits, making load times nearly instantaneous for that specific user.

Why it matters

Understanding caching is critical for balancing performance (fast load times) with freshness (ensuring users see the latest updates).

Developers control this balance primarily through HTTP response headers like Cache-Control, directly impacting whether a user gets a 0ms load or is forced to download the whole page again.

How it works

When a browser requests an asset, the request travels through a hierarchy.

1. **Browser Cache**: The browser checks its local cache. If fresh, it serves it immediately (0ms latency).

2. **Edge Cache**: If the browser cache misses, the request hits the nearest CDN node. If fresh, the CDN responds.

3. **Origin Server**: If the edge cache misses, the request travels to the application's origin server. The origin generates the response and passes it back, storing it in the Edge and Browser caches along the way.

Try it

Send requests and watch how the Cache-Control headers dictate where the file is served from.

The Caching Relay

Watch how network latency changes based on cache hits.

Browser
Edge CDN
Origin
Network Console
Awaiting request...0ms

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1Which Cache-Control directive forces the browser to check with the server before using a cached file?
  2. 2What is the primary functional difference between a browser cache and an edge cache (CDN)?
  3. 3Your team implemented 'Cache-Control: max-age=31536000, immutable' for JS files. What critical practice MUST accompany this strategy?

Remember this

  • Browser cache is private and instantaneous.
  • Edge cache is shared and low-latency.
  • Always hash filenames for long-lived cached assets, and use no-cache for HTML files.

Done with this concept?

Mark it complete to track your progress. No login needed.