Explain the HTTP caching mechanism

Purpose of HTTP caching

Reduce repeated network round-trips to speed up page loads and lower server load.

HTTP caching works at two levels:

1. Strong cache — the browser serves the resource from local storage without making any request.
2. Negotiation cache (conditional cache) — the browser asks the server "has this resource changed?".

1. Strong cache

Cache-Control (HTTP/1.1, takes priority)

Cache-Control: max-age=31536000, immutable

Directive	Meaning
max-age=<seconds>	How long the cached response is valid (from response time)
no-cache	Must revalidate with the server on every request (doesn't mean "don't cache")
no-store	Never cache at all
public	Can be stored by shared caches (e.g. CDN)
private	Only the browser's private cache may store it
immutable	The resource will not change within its max-age period

Expires (HTTP/1.0, legacy)

Expires: Wed, 21 Oct 2026 07:28:00 GMT

An absolute expiry timestamp. Cache-Control takes priority when both are present.

Strong cache hit

The browser reads directly from disk/memory cache. The DevTools status reads 200 (from cache) — no request is sent to the server.

2. Negotiation cache

Once the strong cache has expired (or no-cache is set), the browser attaches a validator to its request and asks the server whether the resource has changed.

ETag / If-None-Match (precise, preferred)

Server includes a fingerprint on the response:

ETag: "abc123"

Browser sends on next request:

If-None-Match: "abc123"

If unchanged, the server replies 304 Not Modified (no body — saves bandwidth).

Last-Modified / If-Modified-Since (lower precision)

Last-Modified: Mon, 01 Jan 2026 00:00:00 GMT

If-Modified-Since: Mon, 01 Jan 2026 00:00:00 GMT

If the resource has not been modified since that timestamp, the server replies 304.

ETag takes priority over Last-Modified when both are present.

Cache decision flow

Request a resource
  ├─ Local cache exists?
  │    ├─ Still fresh (within max-age) → 200 (from cache), no request sent
  │    └─ Stale → send request with ETag / Last-Modified
  │              ├─ Unchanged → 304 Not Modified, use local cache
  │              └─ Changed → 200 + new resource
  └─ No cache → 200 + new resource

Practical recommendations

Resource	Recommended strategy
HTML	Cache-Control: no-cache (revalidate every time)
JS / CSS (hashed filenames)	Cache-Control: max-age=31536000, immutable
Images (hashed filenames)	Cache-Control: max-age=31536000, immutable
API responses	Usually no-store or a short max-age

Using content-hashed filenames (e.g. main.abc123.js) lets you cache static assets indefinitely and bust the cache simply by changing the hash when you deploy.