HTTP 304 Not Modified Requires Conditional Request Headers

Server returns 304 Not Modified but the browser still shows stale content, or the server never returns 304 even though nothing changed.

Send the correct conditional headers. For ETag-based caching send If-None-Match: <etag>. For date-based caching send If-Modified-Since: <date>. The server compares these and returns 304 with no body if the resource is unchanged.

const res = await fetch('/api/data', {
  headers: {
    'If-None-Match': localStorage.getItem('etag') || ''
  }
});
if (res.status === 304) {
  return JSON.parse(localStorage.getItem('cached'));
}
const etag = res.headers.get('ETag');
const data = await res.json();
localStorage.setItem('etag', etag);
localStorage.setItem('cached', JSON.stringify(data));
return data;

304 is a cache validation response, not a cache hit. The client must opt in by sending a validator header. Without it, the server has no basis to skip sending the body.