Cloudflare Developers•5mo ago

Caching issues

Documentation(https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/caching.md) is very vague, it first says "Caching in Next.js applications (thus applications built using @Cloudflare/next-on-pages as well) is enabled by default." But then, it talks about two storage options. There is no sample for either option...

GitHub

next-on-pages/packages/next-on-pages/docs/caching.md at main · clou...

CLI to build and develop Next.js apps for Cloudflare Pages - cloudflare/next-on-pages

2 Replies

dzoni•5mo ago

Hello, I saw your posts and I am interested in the cache issues topic. I also saw that there is some custom implementation here https://github.com/cloudflare/next-on-pages/issues/799 can you share yours maybe? I use next.js with Cloudflare pages and external CMS and don't want to fall into this issue. Also, I have SDK from my CMS which is using fetch internally so it would be a pain to reimplement it.

GitHub

[🐛 Bug]: Next fetch caching having issues in [email protected] ·...

next-on-pages environment related information System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.5.0: Wed May 1 20:17:33 PDT 2024; root:xnu-10063.121.3~5/RELEASE_ARM64_T6031 CPU...

stOP•5mo ago

It's like this:

const SUSPENSE_CACHE_URL = "awesome.local";

const buildCacheKey = (key: string) => {
  return `https://${SUSPENSE_CACHE_URL}/entry/${key}`;
};

export const cachedFetch = async (
  name: string,
  key: string,
  age: number,
  fetcher: () => Promise<Response>,
  processor?: (response: Response) => Promise<Response>
) => {
  const cache = await caches.open(name);

  let response = await cache.match(buildCacheKey(key));

  if (response === undefined) {
    response = await fetcher();

    if (processor) {
      response = await processor(response);
    }

    response.headers.append("Cache-Control", `s-maxage=${age}`);

    getRequestContext().ctx.waitUntil(
      cache.put(buildCacheKey(key), response.clone())
    );
  }

  return (await response.json()) as unknown;
};

const SUSPENSE_CACHE_URL = "awesome.local";

const buildCacheKey = (key: string) => {
  return `https://${SUSPENSE_CACHE_URL}/entry/${key}`;
};

export const cachedFetch = async (
  name: string,
  key: string,
  age: number,
  fetcher: () => Promise<Response>,
  processor?: (response: Response) => Promise<Response>
) => {
  const cache = await caches.open(name);

  let response = await cache.match(buildCacheKey(key));

  if (response === undefined) {
    response = await fetcher();

    if (processor) {
      response = await processor(response);
    }

    response.headers.append("Cache-Control", `s-maxage=${age}`);

    getRequestContext().ctx.waitUntil(
      cache.put(buildCacheKey(key), response.clone())
    );
  }

  return (await response.json()) as unknown;
};

Gaming

Programming

Caching issues