Stop 01 · Internet & Web BasicsTopics · 11/14

Cache

In short

The fastest request is the one you never make. Caching keeps copies of files close to the user, so repeat visits load in a blink.

Storing copies of resources (images, scripts, API responses) closer to the user or in the browser to avoid re-fetching them on every request. Effective caching reduces bandwidth, latency, and server load, but cached data must have a clear freshness and invalidation strategy so users do not receive stale resources unexpectedly.

The jaadu takes a chilled water bottle out of the fridge.

Think of it like this

A water bottle in the fridge

Instead of filling a glass from the tap every time you're thirsty, you keep a bottle in the fridge and refill it when it runs out. A cache keeps a ready copy and refreshes it when it gets old.

Watch it happen

A repeat visit

Browser

Cache

Server

app.3f9a1c.js?

1/6The browser checks its cache before going to the network.

The big ideas

What you need to know

The browser keeps copies

The browser saves files like CSS, JS and images, so the next visit can skip the download.

Cache-Control sets the rules

max-age says how long a file stays fresh. no-store says never keep it.

Checking is cheaper than downloading

With an ETag, the browser asks 'has this changed?' and the server can reply 304 Not Modified with no body.

New name, new cache

Build tools add a hash like app.3f9a1c.js, so each new version gets a new URL and skips the old cache.

See it in code

Walk through the code

http

1# Hashed files never change, so cache them for a year2Cache-Control: public, max-age=31536000, immutable3 4# HTML should always be checked for updates5Cache-Control: no-cache6 7# Never store sensitive pages8Cache-Control: no-store

1/3Hashed files never change, so let browsers keep them for a year.

no-cache doesn't mean 'don't cache'. It means 'store it, but check with the server before using it'. no-store is the one that means never keep it.

Save yourself the pain

Common mistakes

Oops

Caching index.html for a long time.

Do this instead

Keep HTML on no-cache so users get new releases, and cache the hashed JS and CSS for a long time.

Oops

Mixing up no-cache and no-store.

Do this instead

no-cache stores and then checks with the server. no-store never saves the response at all.

Your mission

Catch the cache in action

~10 min

Quick check

Which header lets the browser use a file for a year without asking the server?

Go deeper

1Inspect `Cache-Control` and `ETag` response headers in the Network tab. Validate your understanding by applying it in a small practical example.
2Learn the difference between browser cache, CDN cache and server-side cache. Focus on understanding the underlying reason it works, not only memorizing the definition.
3Read about cache invalidation strategies — a classic hard problem in CS.