How to detect whether a browser is using cached version of the website?

Question

I have the following problem - there is a clock on my webpage and I'm trying to fight the following thing - if a user goes to another page and then presses back, the clock is desynchronized (it should show the time of the server). I have the mechanisms to synchronise the clock but I'm thinking how should I detect whether to fire them up (they should be used as rarely as possible as they are expensive). So is there a widely used way to detect whether user is using cached version of the page? One way I thought about is looking at user local time and if suddenly there is a jump between previous time registered and time registered now I can fire the mechanism, but is there a simpler, generic way (for example - maybe browser sends some message to webpage to communicate that...)?

Answer 1

It sounds like you're allowing the client or server to do a full page cache, which you don't want due to parts of the page relying on the current server date time.

You certainly want to remove client caching from you response headers of the main response, especially if you have any sort of authentication that you need to check before rendering the page; you will want to make sure the client is still logged in for example.

You will also want to remove any full response caching from the server. You should investigate server partial or donut caching which allows you to cache certain parts of the response (so it doesn't need to work out static data that won't change; for example the navigation or footer) but will go off and get new results for the parts of your page that should change on each request.

The date time display and all other reliant parts of the response will be updated, but static parts will come from the server cache.

A good (and easier) example of this problem is where you have a page that displays a random image on reload. If the page / response is cached on the server, this image will remain the same for each request. The server (code) would need set up to cache everything about the page apart from the image which would be updated by the server. The server (code) will therefore only need to work out the new image that needs to be applied to the response as all other parts of the page come from the cache on the server.

It's also worth noting that server cache is global. If you cache a particular response and another user then requests the same page, they will get the same response as the other user. You may need to vary the cache by certain parameters depending on the needs of your system.