Cloudflare Caching

I've been learning a few things about Cloudflare in the past few weeks.

Yesterday I discovered that by default Cloudflare caches certain file types.

I had a file garden.js that I'm using to render tooltips on my /garden page. I updated it and due to caching the updates weren't actually rendering on my live site.

To change this default behaviour I needed to update the "Cache-Control" headers to this:

app.get("/garden.js", async () => {
  const path = "./garden.js";

  const file = Bun.file(path);

  const text = await file.text();

  return new Response(text, {
    headers: {
      "Content-Type": "text/javascript",
      "Cache-Control": "no-store, no-cache, max-age=0",
    },
  });
});

Once I refreshed the cache in my browser it started working correctly.

The response header that I now see in my browser (once the request goes through Cloudflare) looks like this:

Cache-Control: no-store, no-cache, max-age=0
cf-cache-status: BYPASS