Does anyone have pointers for clearing fetch cache properly when hosting a Nextjs (app router with S

Does anyone have pointers for clearing fetch cache properly when hosting a Nextjs (app router with SSR) on Cloudflare? I'm noticing when testing my pages from various locations/browsers that data is often out of sync. I've been using

revalidateTag

revalidateTag

revalidateTag

revalidateTag to clear fetch cache and it works ~80% of the time. I've narrowed the issue down to locations. If you access the web page from a distant location (via VPN) the data is "stuck" on an older version. Almost like the data cache isn't clearing and propagating, so when accessing the page remotely it loads instantly (seemingly via cache) since it doesn't know about fresh data.

I've posted about this in the community forums (https://community.cloudflare.com/t/nextjs-serving-stale-old-fetch-cache-across-network-how-to-clear-cache/646169/2) but thought I'd try here as well.

SSM Does anyone have pointers for clearing fetch cache properly when hosting a Nextj...

matiasjMusante•4/23/24, 9:34 AM

I think you may try with any cache busting technique, so to avoid completely the cache.

"Cache busting is a technique used in web development to ensure that the latest version of a file is fetched from the server, bypassing cached versions. By appending a unique identifier like a version number or timestamp to the file’s URL, the browser treats it as a new resource, fetching the most up-to-date version. This technique prevents users from seeing outdated cached content and improves the overall user experience."

You may, for example, include the timestamp somewhere in the fetch req. so it will be a unique request.

Why are you using revalidateTag? I myself coudnt make options like (cache : "no-store) work, but revalidatePath/revalidateTag, seemed to work... is the same happening to you?

MmatiasjMusante I think you may try with any cache busting technique, so to avoid completely the...

SMOP•4/23/24, 11:36 AM

I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch new data when cache has been invalidated (via

revalidateTag

revalidateTag

) and after a stale request has been made. Then, after a fetch, it should cache again. This is standard nextjs functionality and has worked me on Vercel.

Like I said, it's kind of working as expected. But it's not 100% reliable. Old data is appearing in various places (locations/browsers) then getting stuck. So a timestamp won't fix this cos it might make nextjs fetch new data every-time. I don't want that.

I've been using

revalidateTag

revalidateTag

for years on Vercel. It works great and is a modular way to manage data cache.

The site in question is a news website. Think of it like a blog. You have an index (home) with post titles/summaries, then you have the post pages. What's happening is: a new post is added, I programmatically call

revalidateTag

revalidateTag

with relevant tags. I then view the page on my browser and refresh it shows the latest post titles on the home page and correct post titles. However, browsers in other locations show old data (even after refresh). And the old data is staying for days. My fetch revalidate is only set to 300300 seconds (5mins).

It's almost like Cloudflare worker/pages aren't spreading data updates across the rays (datacenter's). As though each ray stores it's own instance of .next.next cache. Surely that's not right? Even if it were right, you'd need a way to invalidate cache across all of it, on demand. But I can't find that anywhere.

Sorry to ramble, just hoping I've missed something obvious that's maybe Cloudflare specific.

SSM I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch ...

osa•4/23/24, 3:03 PM

Are you using the Workers KV for caching? https://github.com/cloudflare/next-on-pages/blob/main/packages/next-on-pages/docs/caching.md#workers-kv

Pat Branchaud•4/23/24, 3:08 PM

Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I setupDevBindings like https://github.com/cloudflare/next-on-pages/issues/271 but getRequestContext().env.MY_KV; return empty. Do you have an Idea what I'm doing wrong?

GitHub

[⚡ Feature]: Mocking `process.env.` when running `next dev` · Issue...

Wrangler mocks D1 locally with from this file .wrangler/state/..../db.sqlite So I was thinking it would be possible polymorphically get the binding to query that file when developing using next dev...

PPat Branchaud Hey Dario, I'm trying to make kv work on local environment. In next.config.mjs I...

osa•4/23/24, 3:40 PM

I think you should define the bindings in

wrangler.toml

wrangler.toml

: https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

Oosa I think you should define the bindings in `wrangler.toml` : https://github.com/c...

Pat Branchaud•4/23/24, 4:49 PM

Thank you, I tried that as well, and doesn't work. Did you manage to make it work?

SSM I'm NOT looking to bypass cache on every request. I want my Nextjs app to fetch ...

matiasjMusante•4/23/24, 6:19 PM

IF cache busting solves it, you could as well make a custom implementation and call it when/where you need it. I mean, revalidating would give the same effects than creating a "new" fetch (by adding timestamp somewhere, route or headers). Hope someone may explain all this a little bit more or give some clarification/solution (I myself can´t make the cache: no store option to work, and found that only revalidatePath/Tag are the only ways to revalidate a fetch made inside an nextjs project on nexat-on-pages).

NNob I have about 30-40ms

karim•4/23/24, 10:47 PM

The only thing I can think of is that in my page.tsx file I import in a 1mb json file. Could that be whats slowing it down?

karim•4/23/24, 10:47 PM

If not, does anyone else know how to trouble high cpu time? (median is about 150ms for me)

Kkarim The only thing I can think of is that in my page.tsx file I import in a 1mb json...

Nob•4/23/24, 11:53 PM

yes maybe

PPat Branchaud Thank you, I tried that as well, and doesn't work. Did you manage to make it wor...

osa•4/24/24, 5:22 AM

Yes, if you want a working example run npm create cloudflare@latestnpm create cloudflare@latest select "Website or web app" and "Next". Uncomment the KV section in

wrangler.toml

wrangler.toml

and app/api/hello/route.tsapp/api/hello/route.ts. start dev server

npm run dev

npm run dev

and visit http://localhost:3000/api/hello . If that works for you, then check that you have all the needed packages and correct versions (

wrangler

wrangler

& @cloudflare/next-on-pages@cloudflare/next-on-pages) etc.

ANBU•4/24/24, 6:40 AM

https://github.com/iflamed/hono-react-ssr-shadcn-ui

Sharing this cool project that I found on Hono discord server
All credits to the author

GitHub

GitHub - iflamed/hono-react-ssr-shadcn-ui: Template code for Honojs...

Template code for Honojs with React SSR and Shadcn-UI which running on Cloudflare Pages. - iflamed/hono-react-ssr-shadcn-ui

andrea_bhweb•4/24/24, 9:23 AM

Was investigating to find out why my site was slow in some pages, then today I finally found out why. For some reason making CF cache resulting pages at the edge (by using a Cache Rule) doesn't play well with page streaming: the page is returned only when Next is done rendering the whole page, so TTFB becomes a second and a half instead of milliseconds. Is this a known issue? Is there a config I can operate to have both CF cache and page streaming when not primed?

Oosa Are you using the Workers KV for caching? https://github.com/cloudflare/next-on-...

SMOP•4/24/24, 12:26 PM

You are a bloody legend. This fixed every weird cache issue we were facing

Can't thank you enough. I owe you a beer/coffee. Seriously. I think this is important information for Nextjs devs coming from Vercel where distributed, fast caching is the norm, so I've suggested an edit to the framework guide (https://github.com/cloudflare/cloudflare-docs/issues/14231).

GitHub

Issues · cloudflare/cloudflare-docs

Cloudflare’s documentation. Contribute to cloudflare/cloudflare-docs development by creating an account on GitHub.

florent•4/24/24, 4:34 PM

It looks like I cant use React Server Components with Cloudflare Pages and Nextjs right? At least not If I try to use D1. I need to call getRequestContext()getRequestContext() on the edge and I can only set export const runtime = "edge";export const runtime = "edge"; within an api route, right? (Nextjs 14)

Fflorent It looks like I cant use React Server Components with Cloudflare Pages and Nextj...

thipperz•4/24/24, 5:54 PM

that's not true, you can export that const in a layout file and that will affect all pages within it

thipperz•4/24/24, 5:55 PM

actually I do export that const in various places like my D1 functions folder

Tthipperz actually I do export that const in various places like my D1 functions folder

florent•4/24/24, 5:56 PM

do you use use serveruse server within the files in your D1 folder?

and thanks for the hint with the layout, I didn't try that one

Fflorent do you use `use server` within the files in your D1 folder? and thanks for the...

thipperz•4/24/24, 6:11 PM

I only use "use server" for server actions, and I use server actions when I need to fetch or update data from client components. Since I cannot use D1 bindings directly from client components, I use server actions to forward requests to the file that interacts with D1.

Server actions are all exported functions that you have in a file that begins with the "use server" directive, and adding this directive at the top of the file means that you cannot export any other thing except for async functions, not even the "export const runtime = 'edge'" - so they have this limitation, which I believe is intented.

Tthipperz I only use "use server" for server actions, and I use server actions when I need...

florent•4/24/24, 10:31 PM

tysm! I think I didnt understand how all these pieces work together, now I've managed to call my d1 db without any problems. I really really appreciate it your explanation cleared it for me

thipperz•4/24/24, 10:33 PM

I'm glad to be helpful!

Georgi Vatsov•4/25/24, 7:04 AM

Hey! Anyone aware if I could use Cache API (caches.default) in next-on-pages project's middleware file?

mr nooli•4/26/24, 3:03 PM

Hey, a slightly random question, when you get a massive nextjs project w/ cloudflare you end up going over the 10mb limit (especially if there's prisma involved), is it possible to split the worker.js file into multiple fragments to get below this limit? @James

Chaika•4/26/24, 3:04 PM

no, pages bundles it all into a single worker file, and the limit is on that

mr nooli•4/26/24, 3:05 PM

hmmmm kk

mr nooli•4/26/24, 3:06 PM

I mean that's not a limitation for me rn, the limitation is prisma x supabase isn't compatible on the edge yet

but hopefully when/if that happens I'll be back on CF

Varna•4/26/24, 3:15 PM

I made an action updateItem(id, value)updateItem(id, value) that is called in client component via onClick.
In dev (localhost) it works. When deployed to CF, it fails request and returns 404 response with not found html page.
If on first line of action I console.log("updateItem starts")console.log("updateItem starts"), it doesn't even appear on CF logs. And what is strange, on CF logs there are multiple calls to the url (2-6 extra requests on average).

Varna•4/26/24, 3:16 PM

I heard that if action throws in nextjs, then it returns 404 page. But not even a single console.log() being pushed is a bit strange to me.

mr nooli•4/26/24, 3:24 PM

idk if it's anyhow relevant to you but I've had an issue before w/ cf where I was importing an action directly from a client component - which in theory is safe but it started working again once I passed it in from a server component, so might be worth checking if that helps?

mr nooli•4/26/24, 3:24 PM

I actually usually prefer passing it via server components

might just be a me thing tho

Taylor•4/26/24, 8:20 PM

I'm going to move that to pages-help sorry

HHmph I'm thinking of moving my next 14 app from vercel to workers. Does anyone have a...

luna•4/27/24, 5:36 AM

https://developers.cloudflare.com/workers/observability/logging/ i send mine to axiom via a tail worker

Cloudflare Docs

Logging · Cloudflare Workers docs

Use different methods of logging throughout the entire software development lifecycle of your Worker project.

Varna•4/27/24, 9:46 AM

Is it me or Next is "handling" errors instead of actually throwing anything useful to logs?

Varna•4/27/24, 9:48 AM

i.e. I have server action that throws, but logs are OK as request returns 404 html and no other errors available in tail

Nob•4/27/24, 7:04 PM

Hey, Is there a way to access KV, D1 etc from local with nextjs ?

Nob•4/27/24, 7:04 PM

the bindings are always null when i do next dev

DiamondDragon•4/27/24, 11:43 PM

Could not find a declaration file for module '@cloudflare/next-on-pages/next-dev'. Could not find a declaration file for module '@cloudflare/next-on-pages/next-dev'. on import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev'import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev' in next.config.mjs. Any suggestions?

loco•4/28/24, 6:29 AM

is there a billing or speed difference in calling a worker via service binding vs calling via fetch+custom.domain for worker? Provided i am using next-on-pages

Walshy•4/28/24, 9:35 AM

service bindings will be faster

Walshy•4/28/24, 9:35 AM

both will charge an invocation (but service bindings won't in the future)

loco•4/28/24, 10:24 AM

According to the docs, i have to use wrangler pages dev if i am using a service binding for the worker(defined in .toml)
So if i use next dev, is it correct to assume the worker would be unavailable?

Helfo•4/28/24, 1:52 PM

Hi, I have next.js with zero trust + workers as API

How i can access current signed user's email in next.js and worker?

My current hint is to decode frontend cookie in worker and hopefuly will get that email and send it back to frontend in response? Some endpoint like GET /userGET /user thats is requested on initila page load

HHelfo Hi, I have next.js with zero trust + workers as API How i can access current si...

avogadro•4/29/24, 12:56 PM

import {jwtDecode} from 'jwt-decode'
jwtDecode(headers().get('cf-access-jwt-assertion'))['email']

import {jwtDecode} from 'jwt-decode'
jwtDecode(headers().get('cf-access-jwt-assertion'))['email']

Lluna yeah i switched back to the vercel one.

Deo Kumar•4/29/24, 2:05 PM

Hey! What's median cpu time after using it?
And are you able to use it since it always hits the cpu time limits.

DDeo Kumar Hey! What's median cpu time after using it? And are you able to use it since it ...

loco•4/29/24, 2:30 PM

@cf-wasm/og didnt work for me either on local dev
I ended up using the vercel one as well.

Lloco @cf-wasm/og didnt work for me either on local dev I ended up using the vercel on...

Deo Kumar•4/29/24, 2:31 PM

How are you importing it?

loco•4/29/24, 2:32 PM

import * as og from "@cf-wasm/og/next";

loco•4/29/24, 2:32 PM

was giving me webpack errors

Does anyone have pointers for clearing fetch cache properly when hosting a Nextjs (app router with S

Similar Threads

Similar Threads

Similar Threads