Cloudflare Developers•11mo ago

Caching documents with cache headers in Remix

In the loader function, we have access to Caches API, so we can use it to cache loader responses, which works fine. However, document-level caching with the headers function does not work. Is there a way to enable document-level caching in Remix when deployed on CF Pages?

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  let cache = caches.default;
  const data = await cache.match(request);
  if (data) return data;

  const time = new Date().toLocaleTimeString();
  const response = json(
    { time },
    {
      headers: {
        "Cache-Control": "public, max-age=5, s-maxage=10",
      },
    }
  );
  const cachedData = await cache.put(request, response.clone());
  console.log("cachedData", cachedData);
  return response;
};`

export const loader = async ({ request, context }: LoaderFunctionArgs) => {
  let cache = caches.default;
  const data = await cache.match(request);
  if (data) return data;

  const time = new Date().toLocaleTimeString();
  const response = json(
    { time },
    {
      headers: {
        "Cache-Control": "public, max-age=5, s-maxage=10",
      },
    }
  );
  const cachedData = await cache.put(request, response.clone());
  console.log("cachedData", cachedData);
  return response;
};`

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Caching documents with cache headers in Remix