What is the difference between max-age and s-maxage?

max-age sets the browser TTL. s-maxage sets the CDN TTL and overrides max-age for shared caches. The browser ignores s-maxage.

Why combine content hashing with immutable?

The filename changes whenever content changes, so old URLs are safe to cache forever. immutable tells the browser not to revalidate even on a forced refresh.

What does no-cache actually do?

It does NOT prevent caching. The response may be stored, but the browser must revalidate with the server (via ETag/If-None-Match) before each use.

When would you use network-first vs cache-first in a service worker?

Cache-first for static assets (JS, CSS, images) where staleness is safe. Network-first for HTML and API routes where freshness matters and offline is a fallback.

How does stale-while-revalidate improve perceived performance?

The cache response is returned instantly, eliminating latency. A background fetch updates the cache so the next request gets fresh data.

What breaks if you cache HTML with max-age=31536000?

After a deploy, users receive the old HTML, which references old (possibly missing) hashed asset URLs. Always use short or zero TTLs on HTML documents.

Caching Strategies · fearchitect

Summary

HTTP caching, CDN edge caches, and service workers form a layered system. Each layer intercepts requests before they hit the origin. Getting the directives right — especially distinguishing `max-age` from `s-maxage`, or `no-cache` from `no-store` — determines how fresh users' data is and how little your origin pays per request.

Jump to the interview angle

Caching stores a response and reuses it for matching requests. The three main layers are:

Browser cache — per-user, governed by HTTP Cache-Control response headers and ETag/Last-Modified validators.
CDN / shared cache — sits between origin and many users; respects s-maxage and Surrogate-Control. One cached response serves thousands.
App cache (service worker) — JavaScript-controlled, survives offline; you pick the strategy per route.

Cache-Control directives

	Directive	Who it targets
max-age=N	Browser	Cache for N seconds; no revalidation within TTL
s-maxage=N	CDN only	CDN TTL; overrides max-age for shared caches
immutable	Browser	Skip revalidation even on hard refresh
no-cache	Browser + CDN	Store, but revalidate before every use
no-store	Browser + CDN	Never store; use for sensitive data
stale-while-revalidate=N	Browser + CDN	Serve stale instantly; refresh in background within N seconds

Service-worker stale-while-revalidate

Returns the cached response immediately if present, then refreshes in the background. The next request gets the updated copy.

Service-worker SWR strategyts

// sw.ts — SWR strategy for API routes
self.addEventListener("fetch", (event: FetchEvent) => {
  if (!event.request.url.includes("/api/")) return;

  event.respondWith(
    caches.open("api-v1").then(async (cache) => {
      const cached = await cache.match(event.request);

      // Fetch in background — update cache for next request
      const networkFetch = fetch(event.request).then((res) => {
        if (res.ok) cache.put(event.request, res.clone());
        return res;
      });

      // Serve cached instantly if available; otherwise wait for network
      return cached ?? networkFetch;
    })
  );
});

No framework dependency — works in any service worker. Versioning the cache name (api-v1) lets you invalidate old entries when the SW updates.

Request path through the three cache layers: service worker, CDN, and origin.

The golden rule

Content-hashed static assets (e.g., main.abc123.js) get Cache-Control: public, max-age=31536000, immutable. HTML documents get short TTLs or no-store — they are the entry point, and a stale one breaks everything after a deploy.

Interview angle

Interviewers probe the difference between browser and CDN caches and when to use immutable. Strong answers name the three layers, distinguish max-age from s-maxage, explain that content hashing unlocks forever-caching, and mention stale-while-revalidate as the freshness–speed trade.

Soundbite: "Hash asset filenames, cache forever with immutable; keep HTML TTLs short or use CDN purge on deploy."

Key terms

Cache-Control: HTTP response header carrying cache directives like `max-age`, `s-maxage`, and `no-store`.
ETag: A validator token the server issues; the browser sends it as `If-None-Match` to revalidate without re-downloading the body.
s-maxage: CDN-specific TTL that overrides `max-age` for shared caches; the browser ignores it.
stale-while-revalidate: Directive (and SW strategy) that serves a stale response instantly, then refreshes in the background.
immutable: Tells browsers the resource will never change within `max-age`; suppresses revalidation on hard refresh.

Summary

Cache-Control directives

Service-worker stale-while-revalidate

Interview angle

Key terms

Related topics

Further reading

Search fearchitect