I was learning http headers and their usage in client and server communication using http protocol(HTTP/1.1). I always wonder how resources are cached using by browsers using etag. To see this practically lets implement cache using chrome and an express server.
First of all built a server using express js.
You can get a ready made server from this link. Github repo link https://github.com/MuhammadAkif/express-server-etag-example.
Note: By default express adds a weak etag header with every response.
There is a file name app.js in this repo, you can see there are two get routes in this repo one is “/getSameId” and “/getUniqueId”. First one always returns the same id and the second one return always a unique id string. Response from both end points is a json with a key id.
Question: But what is etag ?
So now lets learn what is etag first. ETag (entity tag) response header provides a mechanism to cache unchanged resources. It’s value is an identifier which represents a specific version of the resource.
Question: How caching works with etag header ?
Let’s suppose you try to request copy of a XYZ resource from server, server return the XYZ resource with a header etag. By default all browsers always cache the resources so no special header in the response is needed. Next time when you try to get again the same XYZ resource browser adds a conditional header ‘If-None-Match’ with the request. On receiving the request for XYZ along with ‘If-None-Match’ header, the server side logic checks whether XYZ needs a new copy of the resource by comparing the current value of the ETag identifier on the server side and the one which is received in the request header.
- If request’s If-None-Match is same as currently generated/assigned value of ETag on the server, then status code 304 (Not Modified) with the empty body is sent back and the browser uses cached copy of XYZ.
- If request’s If-None-Match value doesn’t match the currently generated/assigned value of ETag for XYZ then server sends back the new content in the body along with status code 200. The ‘ETag’ header with the new value is also included in the response. The browser uses the new XYZ and updates its cache with the new data.
Let check it practically.
Clone the repo, run npm install and then node app.js
Open up your browser, open developers tool after that type “localhost:3004/getSameId” in url bar and hit enter. You can see json with property id see first time status code is 200 and there is no ‘If-None-Match’ header in the request headers.
Now reload the page, and again see network tab of developer tool. Please give attention to below attached screenshots first.
In first screen shot you can see status is 304(Not-Modified) and in second screen shot on right you can see ‘If-None-Match’ header in request header. Now server is not sending new response and browser is using cached data because ‘If-None-Match’ value is not changed.
Now if you hit second endpoint http://localhost:3004/getUniqueId you will see response status will never be 304 because it always return a new value and ‘If-None-Match’ doesn’t matched with etag hash on server.
Hope you enjoyed and i made things more clear. Please ask anything related in comments otherwise give a clap.
I will try to write more on further header used for caching resources on server side.