HTTP Cache
This blog intends to give a basic idea of caching. This will be helpful for newbies to get the idea of HTTP caching.
HTTP caching is a mechanism to reduce server workloads by storing the response between the client and server for faster retrieval. The caching will help us to improve the web page speed. The better page speed will helps to get more user experience and, therefore, more audience too.
How does the cache work?
When a browser requests a webpage for the first time from the server, it will return a response with 200 HTTP status code. The server will also return some headers that are going to be used for caching. The main headers are Last-Modified and ETag.
going to be used for caching. The main headers are Last-Modified and ETag.
The Last-Modified header contains the date and time of the content last modified by the server. ETag is a unique hash tag generated by the server. The server will regenerate ETag when the content has been modified.
The browser will receive the above headers and store the response in browser memory, i.e., local device memory. The next time the same is requested, the browser will send a conditional request to the server. This request contains If-Modified-Since and If-None-Match headers. The former contains the last modified time, and the latter contains Etag.
The server will receive this request and check if the content has been modified after this. The ETag has more precedence over modified time. If the content is modified, the server will return 200 with new content; otherwise, the server will return 304 with no modified header and no request body.
If the browser receives 304, then it will display the content from its memory; otherwise, new content will be stored in memory and painted on the screen.
The above is the basic workflow of HTTP caching. The caching will be based on different factors. These factors will vary according to our needs.
A cache can be either private or shared. Private caching means browser caching. This caching will be private for each user. This will lead to a content discrepancy. Even though this is useful for the user-specific content.
Shared caching can be CDN caching, reverse proxy caching, database caching, etc. This type of caching has gained more popularity these days. The main advantage is that users will get the same content from a shared memory pool. When a browser requests a webpage, it first goes to the shared caching server and returns cached content. The browser can still store this content in its memory to decrease the latency. But how will they get updated content?
The server can implement a no-cache derivative on the Cache-Control header. This means the browser can even store the response in memory, but a validation check is essential before using this.
Whenever you are learning caching, the below headers are on your mind.
- Cache-Control
- If-Modified-Since
- If-None-Match
- Vary
Cache-Control has a lot of directives such as max-age, no-cache, no-store, private, public, immutable, etc. You can check this out when you are comfortable with basic concepts.
Vary headers are useful when the same URL should deliver different contents based on the Vary tag. Eg: Vary: Accepted-Language will return different contents for different languages.
Also, there can be custom cache headers from CDN or your own implementations. A detailed study in this area is going on. You can check out more details here: https://httpwg.org/specs/rfc9213.html.