Web Caching Strategy Guide

Q: What does Cache-Control: no-cache mean?

Despite the name, 'no-cache' does not mean 'do not cache'. It means the browser can store the cache, but it must revalidate with the server (e.g., using an ETag) before using the cached version.

Q: What is stale-while-revalidate?

stale-while-revalidate is a Cache-Control directive that tells the browser it can use a stale (expired) cached response immediately, while asynchronously checking the server in the background for an updated version for future use.

Master HTTP caching, CDNs, and Service Workers to dramatically reduce server load and improve load times.

Caching is the single most effective way to improve Web Performance. By storing copies of resources closer to the user (in their browser or on a CDN edge server), you eliminate network latency and server processing time.

The Layers of Web Caching

A modern web application relies on multiple layers of caching:

Browser Cache: The user's local hard drive. The fastest cache, but only available after the user's first visit.
CDN (Content Delivery Network): Servers distributed globally. Caches responses so users download from a server near them, not your origin server.
Service Worker: A programmable JavaScript proxy running in the browser, allowing for complex offline and caching strategies.
Server Cache: Redis, Memcached, or Varnish caching database queries or rendered HTML before it even hits the network.

The `Cache-Control` Header

The HTTP `Cache-Control` header is the primary tool for managing how browsers and CDNs cache your resources. It defines who can cache the response and for how long.

1. The "Immutable" Strategy (For static, versioned assets)

If you use a bundler like Webpack, Vite, or Rollup, your CSS and JS files probably look like app.8f3a9b.js. Because the filename changes whenever the content changes (Cache Busting), you can cache these files forever.

Cache-Control: public, max-age=31536000, immutable

public: Any cache (browser or CDN) can store this.
max-age=31536000: Cache for 1 year (in seconds).
immutable: Tells the browser the file will never change, so it shouldn't even check during page reloads.

2. The "Revalidate" Strategy (For HTML documents)

You never want to cache your index.html for a long time. If you do, users won't see updates, and they won't download the new hashed JS/CSS files.

Cache-Control: no-cache

Wait, doesn't that mean don't cache? No! no-cache means the browser can store the file, but it must check with the server before using it. This is usually done using ETags or Last-Modified headers.

If you truly don't want the file written to disk at all (e.g., for sensitive banking data), use:

Cache-Control: no-store

3. The "stale-while-revalidate" Strategy (For dynamic, non-critical data)

This is a modern, powerful directive. It tells the browser: "Use the cached version immediately (even if it's slightly old), but go fetch a fresh copy in the background so the next visit is up to date."

Cache-Control: max-age=60, stale-while-revalidate=86400

This means: "Use the cache if it's less than 60 seconds old. If it's between 1 minute and 1 day old, show the stale cache immediately, but fetch a new one in the background."

Validation: ETags and Last-Modified

When using no-cache, the browser needs a way to ask the server, "Has this changed?"

ETag (Entity Tag): A unique hash representing the file's content (e.g., ETag: "33a64df5"). The browser sends If-None-Match: "33a64df5". If the file hasn't changed, the server sends a tiny 304 Not Modified response instead of the whole file.
Last-Modified: The server sends the date the file was last changed. The browser asks If-Modified-Since: Tue, 15 Nov.... It serves the same purpose as an ETag but uses timestamps.

Service Workers

Service workers allow you to intercept network requests in JavaScript. This gives you absolute programmatic control over the cache, enabling offline functionality.

Common Service Worker Strategies:

Cache First: Check the cache. If it's there, return it. If not, go to the network. (Great for images and fonts).
Network First: Go to the network. If the network fails (offline), fall back to the cache. (Great for articles or API data).
Stale-While-Revalidate: Return the cache immediately, then update the cache from the network in the background.

Frequently Asked Questions

What does Cache-Control: no-cache mean?

Despite the confusing name, no-cache does not mean "do not cache". It means the browser can store the response in its cache, but it must revalidate it with the origin server (usually via an ETag) before using it on subsequent requests.

What is cache busting?

Cache busting is a technique where you append a version number or hash to a filename (e.g., style.v2.css or app.a8b3c.js). This allows you to set extremely long cache expirations, knowing that when you update the file, the filename changes, forcing the browser to download the new version rather than using the old cached version.

What is stale-while-revalidate?

stale-while-revalidate is a Cache-Control directive that tells the browser or CDN it can serve a stale (expired) cached response immediately to the user, while asynchronously checking the server in the background for an updated version to store for future use. It provides the speed of caching with the freshness of dynamic requests.