Stop 19 · Frontend System DesignTopics · 9/13

Caching

In short

The fastest request is the one you never send. Caching decides what you keep, where you keep it and when you throw it away, and getting it wrong shows users stale data.

Deciding, at an architectural level, what data gets cached, for how long, and how it's invalidated — a recurring decision across API layers, routing and rendering.

The jaadu pours chai from a big steel flask into glasses for a queue of customers.

Think of it like this

The chaiwala's ready flask

During rush hour, he keeps a flask of hot chai ready instead of brewing each cup. Super fast. But after a while it goes cold, so he makes a fresh batch. Caching is the same trade: speed now, but you must decide when to refresh.

Watch it happen

Where a request can be answered

In-app

Browser

CDN

Origin

1/5TanStack Query checks memory. Fresh data within staleTime? Use it, no request at all.

The big ideas

What you need to know

Browser HTTP cache

Cache-Control headers tell the browser how long it may reuse a file without asking again.

CDN cache

A CDN keeps copies of responses in many cities, so most users never reach your origin server.

In-app data cache

Libraries like TanStack Query keep fetched data in memory and decide when it's stale.

Invalidation is the hard part

After a user edits data, you must clear or refresh the cached copy, or they see old values.

See it in code

Walk through the code

1// Static files with a hash in the name: cache for a year2// Cache-Control: public, max-age=31536000, immutable3 4// API data in TanStack Query5const { data } = useQuery({6  queryKey: ["courses"],7  queryFn: getCourses,8  staleTime: 5 * 60 * 1000, // fresh for 5 minutes9});10 11// After enrolling, mark the list stale so it refetches12queryClient.invalidateQueries({ queryKey: ["courses"] });

1/3Hashed static files can be cached for a year without risk.

Hashed filenames change when content changes, so long caching is safe. Data that changes needs a shorter life and clear invalidation after edits.

Save yourself the pain

Common mistakes

Oops

Caching index.html for a year like your JS files.

Do this instead

Keep HTML short-lived or revalidated. It points to the latest hashed files, so users need a fresh copy.

Oops

Updating data on the server but forgetting to invalidate the client cache.

Do this instead

After every mutation, invalidate or update the related query keys.

Your mission

Trace a cached request

~20 min

Quick check

A user edits their profile name, but the header still shows the old name. What's the most likely cause?

Go deeper

1Map out every place your app currently caches data (browser, React Query, CDN, service worker).
2Remember the classic line: 'there are only two hard things in computer science: cache invalidation and naming things.'
3Design a caching strategy for one real feature, including when it goes stale.