How the Cache works

Workers was designed and built on top of Cloudflare’s edge network to allow developers to interact directly with the Cloudflare cache. The cache can provide ephemeral, data center-local storage, as a convenient way to frequently access static or dynamic content.

By allowing developers to write to the cache, Workers provide a way to customize cache behavior on Cloudflare’s CDN. To learn about the benefits of caching, refer to the Learning Center’s article on What is Caching? Open external link .

Since Cloudflare Workers can run before, and after the cache, a Worker can also be utilized to modify assets once they are returned from the cache, to sign or personalize responses, while reducing load on an origin, or latency to the end user by serving assets from a nearby location.

​​ Interacting with the Cloudflare Cache

Conceptually, there are two ways to interact with Cloudflare’s Cache using a Worker:

• Call to fetch() in a Workers script. Requests proxied through Cloudflare are cached even without Workers according to a zone’s default or configured behavior (for example, static assets like files ending in .jpg are cached by default). Workers can further customize this behavior by:

  • Setting Cloudflare cache rules (that is, operating on the cf object of a request ).

• Store responses using the Cache API from a Workers script. This allows caching responses that did not come from an origin and also provides finer control by:

  • Customizing cache behavior of any asset by setting headers such as Cache-Control on the response passed to cache.put().

  • Caching responses generated by the Worker itself through cache.put().

​​ Edge vs. browser caching

The browser cache is controlled through the Cache-Control header sent in the response to the eyeball (the response passed or promised to event.respondWith()). Workers can customize browser cache behavior by setting this header on the response.

Other means to control Cloudflare’s cache that are not mentioned in this documentation include: Page rules and Cloudflare cache settings. Refer to the How to Control Cloudflare’s cache support article Open external link if you wish to avoid writing JavaScript with still some granularity of control.

​​ fetch

In the context of Workers, a fetch provided by the runtime communicates with the Cloudflare cache. First, fetch checks to see if the URL matches a different zone. If it does, it reads through that zone’s cache (or Worker). Otherwise, it reads through its own zone’s cache, even if the URL is for a non-Cloudflare site. Cache settings on fetch automatically apply caching rules based on your Cloudflare settings. fetch does not allow you to modify or inspect objects before they reach the cache, but does allow you to modify how it will cache.

When a response fills the cache, the response header contains CF-Cache-Status: HIT. You can tell an object is attempting to cache if one sees the CF-Cache-Status at all.

This template shows ways to customize Cloudflare cache behavior on a given request using fetch.

​​ Cache API

The Cache API can be thought of as an ephemeral key-value store, whereby the Request object (or more specifically, the request URL) is the key, and the Response is the value.

There are two types of cache namespaces available to the Cloudflare Cache:

• caches.default – You can access the default cache (the same cache shared with fetch requests) by accessing caches.default. This is useful when needing to override content that is already cached, after receiving the response.
• caches.open() – You can access a namespaced cache (separate from the cache shared with fetch requests) using let cache = await caches.open(CACHE_NAME). Note that caches.open Open external link is an async function, unlike caches.default.

When to use the Cache API:

• When you want to programmatically save and/or delete responses from a cache. For example, say an origin is responding with a Cache-Control: max-age:0 header and cannot be changed. Instead, you can clone the Response, adjust the header to the max-age=3600 value, and then use the Cache API to save the modified Response for an hour.

• When you want to programmatically access a Response from a cache without relying on a fetch request. For example, you can check to see if you have already cached a Response for the https://example.com/slow-response endpoint. If so, you can avoid the slow request.

This template shows ways to use the cache API. For limits of the cache API, refer to Limits .