0
votes

My understanding of setting Cache-Control with a max-age value is that the browser is instructed to Cache the file.

What I then expect is that if I hit "enter" on the address bar for the same link, the browser would return a 200 (from cache) response.

My question is that why is it returning a 304 Not Modified response?

The way I see it is that with the 200 (from cache) the browser no longer makes a connection with the Server to validate the file and immediately just serves the cached content. But with the 304, although the browser will not download the file again and will simply instruct the browser to serve the cached file, it will still need to send a request to validate the freshness of the content.

The assets here are served with Amazon's CloudFront CDN with Amazon S3 buckets as the origin. The Cache-Header there (in S3) have been set already. This was is not an issue for all other self-hosted assets.

Thanks for the help!

EDIT: I found this What is the difference between HTTP status code 200 (cache) vs status code 304?. Additional question: I already have Cache-Control set to max-age=31536000, s-maxage=2592000, no-transform, public and still I'm getting a 304, do it need to set the Expire also? I could cache fine before on self-hosted sites with just the Cache-Control.

1

1 Answers

1
votes

You expect to see a 200 with the content, rather than a 304 saying "not modified". That's the browser asking to see if the content is newer than what it has cached. 304 means "no, don't waste your bandwidth, your content is current". It can do this with a couple of methods- etag and if-modified-since.

As an example, we can use your stackoverflow avatar image. When I load that in Chrome and look at the Developer Tools, I can see it has a 304 response and is passing those two headers:

if-modified-since:Thu, 28 Jan 2016 13:16:24 GMT
if-none-match:"484ab25da1294b24f8d9d13afb913afd"