Better Caching With stale-while-revalidate Directive in Cache-Control Header

HTTP Headers Update

The stale-while-revalidate directive can be used alongside max-age inside Cache-Control response header to further strengthen caching policies.

<!-- cache is fresh for 120 seconds, but still can be used for 60 seconds more -->
Cache-Control: max-age=120, stale-while-revalidate=60

Historically cached responses older than max-age are considered stale. The browser then proceeds to get fresh data, and then that data is used to render content to the user.

But with stale-while-revalidate, the expired cached data may still be used for some more time, while browser asynchronously fetches a fresh copy. This makes it possible to render content using the expired cached data right away, while ensuring fresh data for the next time.

Browser Compatibility

Tutorials & Resources

March 28, 2020


Loading Comments