ETag vs Cache-Control

Summary

Cache-Control — freshness rules (max-age, no-store). ETag — conditional request (If-None-Match → 304). ETags save bandwidth on revalidation; Cache-Control avoids request entirely when fresh. no-store for sensitive; immutable + hash for hashed assets. Vary header affects cache key correctness.

Code example

const response = await fetch('/api/config', {
  headers: { 'If-None-Match': cachedEtag },
});

if (response.status === 304) {
  return cachedBody;
}
cachedEtag = response.headers.get('ETag');
return response.json();

Key points

• Cache-Control — freshness rules (max-age, no-store).
• ETag — conditional request (If-None-Match → 304).
• ETags save bandwidth on revalidation; Cache-Control avoids request entirely when fresh.
• no-store for sensitive; immutable + hash for hashed assets.
• Vary header affects cache key correctness.

Further reading

• ETag
• Conditional requests

Related concepts

• Stale-while-revalidate
• HTTP/3 and QUIC