Cloudflare DevelopersCD
Cloudflare Developers•3y 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;
};`
Was this page helpful?