CD
Cloudflare Developers•14mo ago
kishanhitk

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

Did you find this page helpful?