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

[JesseGortarez]

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: (14) arm64 Apple M3 Max Memory: 36 GB Shell: /bin/zsh Package Manager Used: npm (10.5.0)

Relevant Packages: @cloudflare/next-on-pages: 1.11.3 vercel: N/A next: 14.2.3

Description

Our site uses Next with Sanity as the CMS. We've relied on Next to cache the fetch calls to Sanity so we're not hitting the Sanity API on every page view.

When we upgraded from Next 14.1 to 14.2, in testing we saw the issue noted in https://github.com/cloudflare/next-on-pages/issues/769 and updated to [email protected]. We then began to see our API usage increase (from a baseline of ~2k requests per day to more than 45k requests per day).

My assumption is that the fetch patching between both Next and next-on-pages is somehow disrupting the caching behavior, but I can't zero in on which version change might be the root cause since 14.2 can't be viewed on the lower versions without the other issue occurring.

We've reverted back down to 14.1 and 1.11.2 and requests are back down to baseline.

Reproduction

No response

Pages Deployment Method

Pages CI (GitHub/GitLab integration)

Pages Deployment ID

No response

Additional Information

Where might I find the deployment ID? I'd be happy to provide one for one of the deployments that had this issue.

Also if there's any other ideas on how to test this to better understand the issue, I'm happy to help and try some out. Thanks!

Would you like to help?

• [X] Would you like to help fixing this bug?

[ilovemesomeramen]

we are having the same issue with nextjs 14.2.4 and next-on-pages 1.11.3

[miksony]

Hello, any updates on this one? We plan to use next.js 14 with next-on-pages and we also have external CMS for data loading and want to avoid situations like this if possible.

[r1tsuu]

I have tried different combinations of versions next / next-on-cache, including yours that should work (14.1 + 1.11.2) and my KV was always empty, no matter what i do... (it blocks me from using Cloudflare because i don't want to hit my Payload CMS every time too)

Went with my own caching implementation that works as expected, it's a bit specific for my case and there's no revalidate or tags support, on /api/revalidate it just deletes all the stored cache.

// returns cached fetch function 
export const getFetcher = ({
  previewToken,
}: {
  previewToken?: string;
} = {}): typeof fetch => {
  if (previewToken)
    return (url, init) =>
      fetch(url, {
        ...(init ?? {}),
        cache: 'no-cache',
        headers: {
          ...(init?.headers ?? {}),
          Authorization: `JWT ${previewToken}`,
        },
      });

  const cloudflareKV = getRequestContext().env.__NEXT_ON_PAGES__KV_SUSPENSE_CACHE;

  return async (url, init) => {
    if (init?.method && init?.method !== 'GET') return fetch(url, init);

    const href = url instanceof Request ? url.url : url instanceof URL ? url.href : url;

    const valueByURL = await cloudflareKV.get(href);

    if (valueByURL)
      return { json: () => JSON.parse(valueByURL), ok: true, status: 200 } as Response;

    const response = await fetch(href, { ...init, cache: 'no-cache' });

    const json = await response.clone().json();

    await cloudflareKV.put(href, JSON.stringify(json));

    return response;
  };
};

Revalidation:

import { getRequestContext } from '@cloudflare/next-on-pages';
import type { NextRequest } from 'next/server';

export async function GET(request: NextRequest) {
  const secret = request.nextUrl.searchParams.get('secret');

  if (!process.env.REVALIDATE_SECRET || secret === process.env.REVALIDATE_SECRET) {
    const cloudflareKV = getRequestContext().env.__NEXT_ON_PAGES__KV_SUSPENSE_CACHE;

    const list = await cloudflareKV.list();
    
    // idk is it safe here to just Promise.all them?
    for (const key of list.keys) {
      await cloudflareKV.delete(key.name);
    }

    return Response.json({ now: Date.now(), revalidated: true });
  }

  return Response.json({ revalidated: false }, { status: 401 });
}

export const runtime = 'edge';

I haven't invested into the source, but i if this package patches fetch on top of React / Next patches, i feel like it's too much, in this case I'm not suprised that we have problems with it

[Jdruwe]

To me it seems like that KV is not being updated at all, even with other simple (non Sanity) fetch requests.

[varmil]

I'm having the same issue with next 14.2.5 x [email protected] (node 20.5.1)

I tried both the Cache API and KV, but neither worked. When I deploy myapp to firebase, it is cached normally, so I think it is an issue specific to cloudflare.

[y-pakorn]

Not working for me as well for latest version (2024-08-07) but seems to work normally on 2024-03-29

[ilovemesomeramen]

any updates on this? currently using next-on-pages 1.13.7 with next 14.2.20 and cloudflare seems to still not cache any requests. I enabled the KV store using __NEXT_ON_PAGES__KV_SUSPENSE_CACHE and no entries are made to the namespace

[dario-piotrowicz]

Hello 🙂 Thank you for the issue and apologies for the late reply.

Earlier this year we released our Cloudflare adapter for OpenNext, and we have been continuously investing effort in its improvement since then. Existing deployments can continue to use the next-on-pages tooling, but the Cloudflare adapter for OpenNext is currently stable and recommended for deployment of Next.js applications to Cloudflare.

As such, we will no longer be maintaining next-on-pages. We recently deprecated the package on npm and we plan to archive this repo on Monday Sep 29, 2025. In preparation for archival, we are closing all open issues and PRs.

If you have concerns, please feel free to reply here before the repo is archived (after that, it will no longer be possible to comment) or to reach out to our team on Discord.

Thanks so much for using and contributing to next-on-pages 🧡