Caching with stale-while-revalidate
I was recently researching various cache control approaches and asked ChatGPT to describe what it's used for in caching. The response was really good and surpassed the information I was able to find on the top 5 documentation and blogs results from Google. It's remarkable how fast LLM's and focused AI applications are changing our workflow. I'm really excited to see where this goes over the next couple of years. I thought worth documenting the explanation, here it is.
What is stale-while-revalidate and how is it used?
"Stale-while-revalidate" is a cache control mechanism used in HTTP caching to optimize the delivery of cached content and improve the perceived performance of web applications. It is specified as a directive in the Cache-Control HTTP header.
The stale-while-revalidate mechanism works as follows:
- When a client requests a resource, the cache checks if it has a cached copy of the resource.
- If the cached copy is fresh (i.e., it hasn't yet expired based on its max-age or other freshness criteria), the cache returns the fresh copy to the client.
- If the cached copy is stale (i.e., it has expired), instead of immediately requesting a new copy from the origin server, the cache returns the stale copy to the client. This allows the client to display the content faster, improving perceived performance.
- In the background, the cache fetches a new copy of the resource from the origin server to update its cache. The next time the client requests the resource, the cache should have a fresh copy to serve.
The stale-while-revalidate directive is often used in situations where serving slightly out-of-date content is acceptable and a faster response time is preferred. To enable this behavior, you can set the Cache-Control header with the stale-while-revalidate directive and a duration, like so:
Cache-Control: max-age=600, stale-while-revalidate=30
In this example, the cached content is considered fresh for up to 600 seconds (10 minutes). If the content becomes stale after that, the cache will continue to serve it for up to 30 additional seconds while it fetches an updated copy from the origin server.