Cache me if you can 🏃

A Guide to keep your cache fresh as a daisy with stale-while-revalidate

Today, we are going to talk about an additional tool to help you maintain a fine balance between instancy and freshness when delivering data to your web applications.

RFC5861 states two independent Cache-Control extensions that allow for the cache to respond to a request with the most up-to-date response held.

1. The stale-if-error HTTP Cache-Control extension allows a cache to return a stale response when an error such as Internal Server Error is encountered, rather than returning a hard error. This improves availability.

2. The stale-while-revalidate HTTP Cache-Control extension allows a cache to immediately return a stale response while it revalidates it in the background, thereby hiding latency (both in the network and on the server) from clients
   In this blog, we will be talking more about the stale-while-revalidate HTTP header. The basic idea of this header is to reduce the latency of serving cached content by your web browser to your application and have a refresh mechanism via which the browser itself updates its cache.

A stale-while-revalidate is used inside a cache-control header along with max-age.
For example, if a server response for content include -

Cache-Control: max-age=60, stale-while-revalidate=10

would mean that if any request to the same endpoint is made within the next 60 seconds, the browser will serve the cached content with no further actions. But if any request is made anywhere between 60 to 70 seconds after the initial response, the browsers will not only serve the cached content but also at the same time in the background will fire a re-validation request to the server to update the content of its cache.

The further request will follow whatever Cache-Control header is returned during the re-validation request.

Usage:

As of 2021, all modern browsers do not support the HTTP implementation of stale-while-revalidate. But the good news is similar implementations are available using service workers, and in case you really do not want to deal with service workers, then there are popular libraries such as swr which implements something along similar lines and you could use it in your react project using custom fetchers such as axios, unfetch and so on.