8

Basically the question is in the title.

My browser serves the data from local cache every time, instead of going to CloudFront for it.

Invalidation on CloudFront side doesn't help (as expected).

The age header in response (from local cache) is stuck at value of 1796. Is it because it's loaded from cache, not CF? I thought it's supposed to get incremented as time goes.

If I clear up the browser cache, it naturally hits CloudFront, and does so every time when I refresh the page.

However if I don't refresh the page for sufficiently long period of time (2 weeks, in my case), then come back and refresh it, the browser starts serving it only from local cache again. Today is March 20, and the last time I refreshed the page was March 06, i.e 2 weeks ago, so last-modified is Mon, 06 Mar 2023 06:37:39 GMT

All the articles I found so far, explain how to reduce CloudFront's caching time, in order to hit S3 more often (it's accomplished by setting cache-related headers accordingly) but I couldn't find how to do the same with the browser's local cache.

Any hints or ideas on that?

(getting data periodically from CloudFront is fine too, no need to go to CloudFront every time. I just don't want the browser to ALWAYS look into local disk cache)

Improve this question
3
  • 1
    This is the way Web works. Static content is first served from local cache and then the server. You can append a query string to your static asset link, and change its value when you do the new deployment. That way, it will always go to CloudFront first, and then save the response to local cache for sub-sequent usage. Commented Mar 21, 2023 at 7:22
  • I see, that's a possible workaround. But can you explain why it normally goes to cloudfront after i clear up browser's cache and start refreshing it, say, once every 10 secs, and then if I do a long break and refresh again, it never goes to cloudfront anymore? Commented Mar 21, 2023 at 7:26
  • 1
    Because static content is usually cached in browser's memory. This is default behavior of modern browsers. Commented Mar 21, 2023 at 7:42

1 Answer 1

Reset to default
5

You can instruct the browser not to cache using the max-age cache-control directive, while instructing CloudFront to cache using the s-maxage directive.

You can also use an ETag to have the browser always check with CloudFront, but not transfer any actual bytes if the content is unchanged.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

sorry but how to instruct CloudFront to set the headers in the response returned to browser? i can set the headers for s3 objects but i couldn't find how to do the same on CloudFront
You can set the Cache-Control header at your origin. If you're using S3, you can set it as metadata on individual objects. If you want to configure it in CloudFront, you can create a Response Headers Policy to configure HTTP response headers you want CloudFront to return to viewers.
awesome, thanks for the hint, I somehow missed the response headers policy option

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.