kishanhitk Posts - Answer Overflow

kishanhitk

•Created by kishanhitk on 11/23/2023 in #pages-help

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;
};`

1 replies

Gaming

Programming