I was fooling around with Javascript MVC lately, and came across a problem -- let's say I have this URL, "example.com/objects/1". If I open it in the browser, the server returns a barebones HTML page. JS in the page makes a separate ajax call to the same address, the server detects the accept header, returns JSON data, and the page is populated with content.
Now I navigate off the page to a different site, and press the back button. Instead of the HTML page, I get the cached JSON response. Now if I change the ajax call to "example.com/objects/1.json" instead, that keeps the URLs separate and the browser won't cache the wrong response. Is there a better way to solve this?
The problem I have with Vary headers is that many reverse proxies will just not cache anything with a Vary header. The reason is that if they add the value of the header that "varies" to the key of the cache, now they have to cache under many different keys the same content.
Think of all the different "Accept" headers that clients can send you, each one of these will get an entry in your cache. And now add other headers that should also be in "Vary" like "Cookies", "Accept-Language", etc. and your cache will be virtually useless.
Interesting. Perhaps, instead of relying on "Vary: Accept" the server should respond with: "Vary: YourCustomHeader". The API client, on the other hand, will include "YourCustomHeader: SomeConstantValue" when making requests to the server. That way, the reverse proxy will only store up to two versions in its cache.
Now I navigate off the page to a different site, and press the back button. Instead of the HTML page, I get the cached JSON response. Now if I change the ajax call to "example.com/objects/1.json" instead, that keeps the URLs separate and the browser won't cache the wrong response. Is there a better way to solve this?