You’d need to run the fetch in a server section of your Next.js code

D

Donnager•1/4/24, 3:15 AM

n00b Q with DOs:

can't get the next-on-pages binding to register:

    durableObjects: {
      name: "CLOUDFLARE_DO",
      className: "Counter",
      // scriptName: "cloudflare-do",
    },

    durableObjects: {
      name: "CLOUDFLARE_DO",
      className: "Counter",
      // scriptName: "cloudflare-do",
    },

    durableObjects: {
      name: "CLOUDFLARE_DO",
      className: "Counter",
      // scriptName: "cloudflare-do",
    },

    durableObjects: {
      name: "CLOUDFLARE_DO",
      className: "Counter",
      // scriptName: "cloudflare-do",
    },

console warning:

Warning:
You have requested Durable Objects but no local instance of such has been found.
In order to access your Durable Objects please start the relevant workers locally
with `wrangler dev` and then restart the next dev server.

The following bindings won't be accessible until then:
  - name
 - className

Warning:
You have requested Durable Objects but no local instance of such has been found.
In order to access your Durable Objects please start the relevant workers locally
with `wrangler dev` and then restart the next dev server.

The following bindings won't be accessible until then:
  - name
 - className

Warning:
You have requested Durable Objects but no local instance of such has been found.
In order to access your Durable Objects please start the relevant workers locally
with `wrangler dev` and then restart the next dev server.

The following bindings won't be accessible until then:
  - name
 - className

Warning:
You have requested Durable Objects but no local instance of such has been found.
In order to access your Durable Objects please start the relevant workers locally
with `wrangler dev` and then restart the next dev server.

The following bindings won't be accessible until then:
  - name
 - className

DO local worker config (code works with wrangler dev and also deployed):

[[durable_objects.bindings]]
name = "CLOUDFLARE_DO"
class_name = "Counter"

[[durable_objects.bindings]]
name = "CLOUDFLARE_DO"
class_name = "Counter"

Simple component:

const DurableObjectPage = async ({}: DurableObjectPageProps) => {
  console.log(process.env.CLOUDFLARE_DO);
  const res = await process.env.CLOUDFLARE_DO.fetch();
  console.log({ res });
  return (
    <>
      <h1>Durable Object</h1>
      {res}
    </>
  );
};

export default DurableObjectPage;

const DurableObjectPage = async ({}: DurableObjectPageProps) => {
  console.log(process.env.CLOUDFLARE_DO);
  const res = await process.env.CLOUDFLARE_DO.fetch();
  console.log({ res });
  return (
    <>
      <h1>Durable Object</h1>
      {res}
    </>
  );
};

export default DurableObjectPage;

const DurableObjectPage = async ({}: DurableObjectPageProps) => {
  console.log(process.env.CLOUDFLARE_DO);
  const res = await process.env.CLOUDFLARE_DO.fetch();
  console.log({ res });
  return (
    <>
      <h1>Durable Object</h1>
      {res}
    </>
  );
};

export default DurableObjectPage;

const DurableObjectPage = async ({}: DurableObjectPageProps) => {
  console.log(process.env.CLOUDFLARE_DO);
  const res = await process.env.CLOUDFLARE_DO.fetch();
  console.log({ res });
  return (
    <>
      <h1>Durable Object</h1>
      {res}
    </>
  );
};

export default DurableObjectPage;

^--- undefined / cannot read properties of undefined

if there is a template/example or doc please do not hesitate to point that out to me!

VVillage (Josef)You’d need to run the fetch in a server section of your Next.js code

B

Befus•1/4/24, 9:22 AM

You are right damn, I didn't even notice, the fetch is being called in a client side component

J

jmak•1/4/24, 5:15 PM

Hi whenever I try to build on cloudflare, I am running into these errors:

12:12:23.387    Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
12:12:23.388    Installing project dependencies: npm clean-install --progress=false
12:12:27.033    npm ERR! code ERESOLVE
12:12:27.042    npm ERR! ERESOLVE could not resolve
12:12:27.042    npm ERR! 
12:12:27.043    npm ERR! While resolving: @material-ui/core@4.12.4
12:12:27.043    npm ERR! Found: @types/react@18.2.45
12:12:27.043    npm ERR! node_modules/@types/react
12:12:27.043    npm ERR!   dev @types/react@"^18" from the root project
12:12:27.043    npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
12:12:27.044    npm ERR!   node_modules/@material-ui/types

12:12:23.387    Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
12:12:23.388    Installing project dependencies: npm clean-install --progress=false
12:12:27.033    npm ERR! code ERESOLVE
12:12:27.042    npm ERR! ERESOLVE could not resolve
12:12:27.042    npm ERR! 
12:12:27.043    npm ERR! While resolving: @material-ui/core@4.12.4
12:12:27.043    npm ERR! Found: @types/react@18.2.45
12:12:27.043    npm ERR! node_modules/@types/react
12:12:27.043    npm ERR!   dev @types/react@"^18" from the root project
12:12:27.043    npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
12:12:27.044    npm ERR!   node_modules/@material-ui/types

12:12:23.387    Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
12:12:23.388    Installing project dependencies: npm clean-install --progress=false
12:12:27.033    npm ERR! code ERESOLVE
12:12:27.042    npm ERR! ERESOLVE could not resolve
12:12:27.042    npm ERR! 
12:12:27.043    npm ERR! While resolving: @material-ui/core@4.12.4
12:12:27.043    npm ERR! Found: @types/react@18.2.45
12:12:27.043    npm ERR! node_modules/@types/react
12:12:27.043    npm ERR!   dev @types/react@"^18" from the root project
12:12:27.043    npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
12:12:27.044    npm ERR!   node_modules/@material-ui/types

12:12:23.387    Detected the following tools from environment: npm@9.6.7, nodejs@18.17.1
12:12:23.388    Installing project dependencies: npm clean-install --progress=false
12:12:27.033    npm ERR! code ERESOLVE
12:12:27.042    npm ERR! ERESOLVE could not resolve
12:12:27.042    npm ERR! 
12:12:27.043    npm ERR! While resolving: @material-ui/core@4.12.4
12:12:27.043    npm ERR! Found: @types/react@18.2.45
12:12:27.043    npm ERR! node_modules/@types/react
12:12:27.043    npm ERR!   dev @types/react@"^18" from the root project
12:12:27.043    npm ERR!   peerOptional @types/react@"*" from @material-ui/types@5.1.0
12:12:27.044    npm ERR!   node_modules/@material-ui/types

J

jmak•1/4/24, 5:15 PM

however, when I run npm clean-install locally, everything is working properly

J

jmak•1/4/24, 5:16 PM

anyu advice?

A

AA•1/4/24, 9:04 PM

Revaluation like this actually wont work on pages will it? https://nextjs.org/docs/app/building-your-application/caching#time-based-revalidation

Building Your Application: Caching | Next.js

An overview of caching mechanisms in Next.js.

A

AA•1/4/24, 9:04 PM

(I'm running into some crazy caching issues that seem to survive rebuilds)

A

AA•1/4/24, 9:06 PM

does pages have some sort of shared cache?

JJames Try putting `cache: 'no-store'` in your fetch. by default, nextjs tries to cache...

A

AA•1/4/24, 9:15 PM

oh, you're mostly talking about my challenge.. is there a way to make it only store at build time?

A

AA•1/4/24, 9:22 PM

or only revalidate every day or so

AAA Revaluation like this actually wont work on pages will it? https://nextjs.org/d...

B

Befus•1/4/24, 9:38 PM

Why are you still using pages tho?

BBefus Why are you still using pages tho?

A

AA•1/4/24, 9:43 PM

I'm not sure I understand the question

AAA I'm not sure I understand the question

B

Befus•1/4/24, 9:46 PM

Why are you using pages instead of the app router?

BBefus Why are you using pages instead of the app router?

A

AA•1/4/24, 9:46 PM

Haha. Overloaded terms. I'm using cloudflare pages and nextjs app router

A

AA•1/4/24, 9:47 PM

I'm not using nextjs pages directory

B

Befus•1/4/24, 9:47 PM

Ohhhh hahahah, I think it should work

B

Befus•1/4/24, 9:47 PM

when or why do you need to revalidate every day?

A

AA•1/4/24, 9:49 PM

So I'm pulling content from a CMS (directus). For some reason right now it's not pulling new content even if I rebuild on cloudflare... That's the biggest issue.

B

Befus•1/4/24, 9:49 PM

Have you looked at a binding?

A

AA•1/4/24, 9:50 PM

I can replicate this problem locally and fix it by deleting my .nextjs directory

A

AA•1/4/24, 9:50 PM

A binding?

B

Befus•1/4/24, 9:50 PM

Do you build staticly?

A

AA•1/4/24, 9:50 PM

No. I use cloudflare-on-pages. Some of the site isnt static

B

Befus•1/4/24, 9:50 PM

B

Befus•1/4/24, 9:51 PM

This is what I meant its a deploy hook instead of binding lol

A

AA•1/4/24, 9:52 PM

Oh. Yes.. I can do that. But it's not refreshing my content somehow.

A

AA•1/4/24, 9:53 PM

if i do a run fetch with no-cache, the content is updated..

B

Befus•1/4/24, 9:55 PM

Ah then you should do edge routing I think

A

AA•1/4/24, 10:04 PM

Think I just need to understand how server side caching of (fetch) works in nextjs on cloudflare pages.

AAA or only revalidate every day or so

J

James•1/4/24, 10:12 PM

You can use

{ next: { revalidate: ... } }

{ next: { revalidate: ... } }

{ next: { revalidate: ... } }

{ next: { revalidate: ... } }

AAA Revaluation like this actually wont work on pages will it? https://nextjs.org/d...

J

James•1/4/24, 10:12 PM

It should work

JJames You can use `{ next: { revalidate: ... } }`

A

AA•1/4/24, 10:14 PM

not familiar.. investigating

A

AA•1/4/24, 10:14 PM

where does that go?

A

AA•1/4/24, 10:15 PM

oh as part of the fetch call..

J

James•1/4/24, 10:17 PM

Yeah like in the docs you linked

A

AA•1/4/24, 10:17 PM

When you opt for a route to be revalidated on an interval (export const revalidate = 10;),

When you opt for a route to be revalidated on an interval (export const revalidate = 10;),

When you opt for a route to be revalidated on an interval (export const revalidate = 10;),

When you opt for a route to be revalidated on an interval (export const revalidate = 10;),

A

AA•1/4/24, 10:17 PM

looks like you can just set it for the page.. thats interesting

J

James•1/4/24, 10:18 PM

Yeah. Tbh I've never tried the page level one before

A

AA•1/4/24, 10:19 PM

i wish i understood the wizardry cloudflare is doing to make this work.. like how is it caching this info without keeping it running like in node

J

James•1/4/24, 10:21 PM

Regarding fetch request caching in next-on-pages, we store the response in the workers cache API (this is configurable) when nextjs asks us to, and retrieve data from the cache API when nextjs asks us to. Obviously there's more going on under the hood, but that's the very simple explanation

A

AA•1/4/24, 10:22 PM

oh, maybe this doesnt work..

A

Andrew Murphy•1/4/24, 10:22 PM

Yeah you can't use revalidate with next on pages

J

James•1/4/24, 10:23 PM

Ah I guess they might not forward a page level revalidate to fetch requests.

A

Andrew Murphy•1/4/24, 10:23 PM

ask me how i know - 3 days wasted on it

J

James•1/4/24, 10:23 PM

The fetch request revalidate option works though

A

AA•1/4/24, 10:23 PM

I'll need to figure out how to wire that in.. (I'm using a GQL wrapper lib over fetch)..

JJames Regarding fetch request caching in next-on-pages, we store the response in the w...

A

AA•1/4/24, 10:25 PM

is there an easy way for me to get at the workers cache? to flush it or similar?

A

AA•1/4/24, 10:25 PM

it seems.. hidden with CF pages..

A

AA•1/4/24, 10:26 PM

i seem to have some data surviving between builds..

AAA is there an easy way for me to get at the workers cache? to flush it or similar?

J

James•1/4/24, 10:27 PM

You can use revalidatePath / revalidateTag to trigger a revalidation for the fetch requests or all fetch requests under a route. That will be the on-demand revalidation section in the docs

You’d need to run the fetch in a server section of your Next.js code

Similar Threads

Similar Threads

Similar Threads