Cache invalidation strategies

Summary

TTL expiry, event-driven invalidation (mutation → bust tags), stale-while-revalidate, versioned URLs. Wrong strategy: infinite cache on user-specific data or no cache on static assets. TanStack Query query keys encode invalidation scope. CDN cache ≠ browser cache — configure both.

Code example

const cache = new Map();

async function getUser(id) {
  if (cache.has(id)) return cache.get(id);
  const user = await fetch(`/api/users/${id}`).then((r) => r.json());
  cache.set(id, user);
  return user;
}

function invalidateUser(id) {
  cache.delete(id);
}

Key points

• TTL expiry, event-driven invalidation (mutation → bust tags), stale-while-revalidate, versioned URLs.
• Wrong strategy: infinite cache on user-specific data or no cache on static assets.
• TanStack Query query keys encode invalidation scope.
• CDN cache ≠ browser cache — configure both.

Further reading

• HTTP caching
• Cache-Control

Related concepts

• Stale-while-revalidate