My browser keeps showing cached page despite sending no-cache, no-store, must-revalidate from server in response header

Question

The content on our pages keep changing and hence we do not want the browser to cache the page or show cached page or our users. But the browser keeps showing cached page despite sending no-cache, no-store, must-revalidate from server in response header. This is really frustrating. We have thousands of users and they are all reading old news!!!

We are using client side js template (handlebars js) to read data off a server and render the page but the browser keeps showing the last rendered page to users and handlebars is neither reading new data from server no is it updating the content. What could be wrong??

If I press shift reload then the browser does display new content but i cannot ask or expect my users to do that every time they load our page.

Can someone give useful pointers?

200 OK

Response header:

Accept-Ranges: bytes
Cache-Control: no-cache, no-store, must-revalidate
Connection: keep-alive
Content-Length: 12229
Content-Type: text/html
Date: Fri, 14 Aug 2020 09:08:10 GMT
ETag: "1e9602c3ddcf81c338fa4194c61ea035"
Last-Modified: Fri, 07 Aug 2020 12:38:22 GMT
Server: nginx/1.19.1
Strict-Transport-Security: max-age=0; includeSubDomains
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-request-id: tx00000000000004b9d2b06-005f36547a-ab8956-ams3b
x-rgw-object-type: Normal

Request headers:

Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
Cache-Control: max-age=0
Connection: keep-alive
Cookie: _ga=GA1.1.709310680.1596978913; _gid=GA1.1.2045080055.1596978913
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36
(index):48 [Violation] Avoid using document.write(). https://developers.google.com/web/updates/2016/08/removing-document-write

​ We are doing a http GET as there will be cloudflare in front of nginx that will do the tls termination and doing normal http get to our nginx. I dread to think what other caching issues cloudflare caching will introduce once we go live on cloudflare. We need to go live in a couple of days and need to resolve this before we go live in production with this version. Will appreciate quick help in this regard to resolve the above issue. Thanks in advance.

Answer 1

You have used Cache-Control directives that conflict with each other, thus the browser must make a decision as to which directives to obey and which to ignore.

Specifically you used:

• no-cache. This actually allows the response to be cached, though it is immediately marked as stale and is always revalidated with the origin server.
• must-revalidate: Only means that a stale cached document must be revalidated with the origin server. Implied by no-cache so has no additional effect here.
• no-store: Don't cache the response.

What does a browser do when you have said to not cache it, and also it is OK to cache it?

If you don't want the response to be cached, use only no-store. Do not use the other two Cache-Control directives.