HTTP Caching

HTTP caching lets browsers reuse previously fetched responses according to freshness and validation rules. It can reduce network requests, latency, and transferred data when resources are cacheable.

HTTP caching stores responses so a browser can satisfy later requests without always contacting the origin server. The main cache behavior is controlled by HTTP response headers, especially `Cache-Control`, along with validators such as `ETag` and `Last-Modified`.

A response can be fresh for a specified period, commonly expressed with `Cache-Control: max-age=...`. While it is fresh, the browser can reuse it without contacting the server. Once stale, the browser may validate the cached response with the server instead of downloading the entire representation again.

Validation commonly uses `ETag`. The browser sends the validator in `If-None-Match`; if the resource has not changed, the server can return `304 Not Modified`, allowing the browser to reuse its stored response body. Similar validation can use `Last-Modified` and `If-Modified-Since`.

Caching is different from merely keeping data in application state. HTTP caching follows HTTP semantics and response headers, while application-level caches such as an in-memory JavaScript object are controlled by application code. Frontend engineers should also consider whether a resource contains user-specific data before allowing shared caching.

Key points

• `Cache-Control` defines important caching behavior.
• Fresh cached responses can be reused without a network request.
• Stale responses can be revalidated with `ETag` or `Last-Modified`.
• `304 Not Modified` means the cached representation can be reused.
• HTTP caching is distinct from an application-level JavaScript cache.

Interview questions

What is HTTP caching and why is it useful?

HTTP caching allows a client or intermediary to reuse a previously received response instead of fetching the representation every time. This can reduce latency, bandwidth usage, and server work. The server communicates caching behavior through HTTP headers such as `Cache-Control`. The browser uses those rules to decide whether a stored response can be reused or should be revalidated.

What is the difference between a fresh and stale cached response?

A fresh response is still within its configured freshness lifetime, so the cache can normally reuse it without contacting the origin. A stale response has passed that freshness lifetime. Depending on the caching directives and request context, the client may revalidate it or fetch a new response. Freshness therefore determines whether validation is needed before normal reuse.

How does `ETag` work with HTTP caching?

The server can attach an `ETag` validator to a response. When the cached response later needs validation, the browser can send that value in `If-None-Match`. If the server determines that the representation has not changed, it can return `304 Not Modified`, allowing the browser to use the cached body. If the representation changed, the server can return a new response instead.

What does `Cache-Control: public, max-age=3600` mean?

`max-age=3600` indicates a freshness lifetime of 3,600 seconds, or one hour, for the stored response. `public` indicates that the response is permitted to be stored by a shared cache, subject to the other caching rules. During its freshness lifetime, a cache can generally reuse the response without revalidating it. Whether `public` is appropriate depends on whether the response is safe to share between users.

Why might a frontend engineer use HTTP caching instead of storing fetched data in JavaScript?

HTTP caching is integrated with the browser's HTTP request machinery and can apply to resources such as scripts, stylesheets, images, and API responses. Its behavior is communicated through standardized HTTP metadata and can support freshness and server-side validation. A JavaScript cache instead requires application-specific storage, lookup, invalidation, and synchronization logic. The two mechanisms can complement each other, but they solve caching at different layers.