Hi all. If I want to set cache settings on `fetch` in a Next.js server component or middleware. Shou

Hi all. If I want to set cache settings on

fetch

fetch

in a Next.js server component or middleware. Should I use the options defined by the workerd API as the alternative for

cache: 'no-store'

cache: 'no-store'

?

https://developers.cloudflare.com/workers/runtime-apis/request/#the-cf-property-requestinitcfproperties
https://nextjs.org/docs/app/api-reference/functions/fetch#optionscache

Nneoney limit there is 10mib

Deo Kumar•4/10/24, 3:16 PM

10mib or 25?

neoney•4/10/24, 3:16 PM

10 i believe

neoney•4/10/24, 3:16 PM

for functions

neoney•4/10/24, 3:16 PM

25mb is for assets

Baptistabomb•4/10/24, 3:17 PM

is there any way to deminify so that I can see what is taking space in the func.js functions?

JJuul Hi all. If I want to set cache settings on `fetch` in a Next.js server component...

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

If you want to use Next.js' fetch cache, you should use the Next.js options

BBaptistabomb is there any way to deminify so that I can see what is taking space in the func....

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

--disable-worker-minification

--disable-worker-minification

flag when building

Nneoney and project will have users as its a migration, so non issue for me

Deo Kumar•4/10/24, 3:19 PM

You can use @cf-wasm/og, it uses cache api to cache responses.

import { ImageResponse, GoogleFont } from "@cf-wasm/og/next";

new ImageResponse(<div>Hello</div>, {
  fonts: [new GoogleFont("JetBrains Mono")]
});

import { ImageResponse, GoogleFont } from "@cf-wasm/og/next";

new ImageResponse(<div>Hello</div>, {
  fonts: [new GoogleFont("JetBrains Mono")]
});

JJames `--disable-worker-minification` flag when building

Baptistabomb•4/10/24, 3:21 PM

hmm I did `pnpx @cloudflare/next-on-pages --disable-worker-minification``
and it is still not readable :/

JJames If you want to use Next.js' fetch cache, you should use the Next.js options

JuulOP•4/10/24, 3:22 PM

Also on Cloudflare Pages with the Edge runtime? If I do the below it throws

The 'cache' field on 'RequestInitializerDict' is not implemented.

The 'cache' field on 'RequestInitializerDict' is not implemented.

when called on the pages deployment.

const response = await fetch(`/example`, {
    cache: 'no-store'
  });

const response = await fetch(`/example`, {
    cache: 'no-store'
  });

https://github.com/cloudflare/workerd/issues/698

Baptistabomb•4/10/24, 3:23 PM

my page is just that and it still takes 87Ko even though WelcomeForm has 'use client'

import WelcomeForm from '@/components/welcome/WelcomeForm'
import { getAccountOfCurrentSession } from '@/lib/api/accounts/queries'

export const runtime = 'edge'

export default async function WelcomePage () {
  const account = await getAccountOfCurrentSession()
  return (
    account && (
      <main className='flex justify-center md:max-h-[80vh] md:min-h-[80vh] overflow-auto overflow-y-scroll scrollbar lg:mt-4'>
        <div className='flex flex-col space-y-2 max-w-[90%] md:max-w-[50%]'>
          <h1 className='my-4 text-2xl font-semibold text-center'>
            Bienvenue! Complétez votre profil avant de commencer
          </h1>
          <WelcomeForm account={account} />
        </div>
      </main>
    )
  )
}

import WelcomeForm from '@/components/welcome/WelcomeForm'
import { getAccountOfCurrentSession } from '@/lib/api/accounts/queries'

export const runtime = 'edge'

export default async function WelcomePage () {
  const account = await getAccountOfCurrentSession()
  return (
    account && (
      <main className='flex justify-center md:max-h-[80vh] md:min-h-[80vh] overflow-auto overflow-y-scroll scrollbar lg:mt-4'>
        <div className='flex flex-col space-y-2 max-w-[90%] md:max-w-[50%]'>
          <h1 className='my-4 text-2xl font-semibold text-center'>
            Bienvenue! Complétez votre profil avant de commencer
          </h1>
          <WelcomeForm account={account} />
        </div>
      </main>
    )
  )
}

JJuul Also on Cloudflare Pages with the Edge runtime? If I do the below it throws `The...

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

pages dir or app dir?

Nneoney 25mb is for assets

Deo Kumar•4/10/24, 3:24 PM

next-on-pages

JuulOP•4/10/24, 3:24 PM

App dir

neoney•4/10/24, 3:25 PM

Oh then the pricing page is outdated

BBaptistabomb hmm I did `pnpx @cloudflare/next-on-pages --disable-worker-minification`` and i...

James•4/10/24, 3:25 PM

it disabled our minification, although next.js + vercel might still be doing their own minification

JJuul App dir

James•4/10/24, 3:25 PM

which next.js version?

JuulOP•4/10/24, 3:25 PM

"@cloudflare/next-on-pages": "^1.11.0",

"@cloudflare/next-on-pages": "^1.11.0",

"next": "^14.0.4",

"next": "^14.0.4",

James•4/10/24, 3:28 PM

Hmm okay, it's possible something might have changed in Next that we need to update something for

JuulOP•4/10/24, 3:30 PM

It does work locally, but I'm running through the next dev command, so I assume there might be runtime API differences with actual deployments? When deployed to cloudflare anything serverside runs with workerd, right?

JuulOP•4/10/24, 3:30 PM

with

export const runtime = 'edge'

export const runtime = 'edge'

Baptistabomb•4/10/24, 3:32 PM

why are the client components embedded inside the func.js in the functions folder ?

neoney•4/10/24, 3:54 PM

theyre still SSR-ed

Baptistabomb•4/10/24, 4:00 PM

Okay, what can I do to prevent them from being bundled in the functions? "use client" at the parent component?

Baptistabomb•4/10/24, 4:01 PM

looks like it does the trick, I will reenable them as server components once I get users to pay for the workers plan for 10Mb

Nneoney in the end 1. service binding doesnt work in next dev 2. mtls cert binding doesn...

thipperz•4/10/24, 5:20 PM

I wonder if you have any news on this? I'm on a very similar situation trying to use RPC locally with next dev

In my case when I run

wrangler pages dev

wrangler pages dev

I can indeed execute rpc method but it also won't work if the worker is running with

wrangler dev --remote

wrangler dev --remote

Using wrangler dev without the remote flag means I can't interact with Vectorize or production R2 buckets..

neoney•4/10/24, 5:20 PM

I don't have any news as I currently don't need to have it working

neoney•4/10/24, 5:21 PM

Im guessing it needs some kind of workers-sdk issue

thipperz•4/10/24, 5:22 PM

I see, do you know if there is another way for me to fetch another worker's route handler with the same zero-latency that RPC would provide?

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

hmm seems Dario created an issue for it
https://github.com/cloudflare/workers-sdk/issues/5577

GitHub

🐛 BUG: Miniflare's `getBindings` does not properly expose RPC entry...

Which Cloudflare product(s) does this pertain to? Miniflare What version(s) of the tool(s) are you using? miniflare@3.20240404.0 What version of Node are you using? 20 What operating system and ver...

SeeringPhil•4/10/24, 7:19 PM

Hello again!

We've now correctly activated KV cache to handle next.js automatic ‘fetch’ caching. (By activating the bindings settings in cloudflare’s dashboard, and by using ‘cache-force’ when doing our fetch calls as discussed here on discord last week)

We expected calls made during the build of our static pages to populate the KV cache and then be able to use that cached data in our ‘edge’ server rendered pages.

However, the KV cache stays empty after the build. BUT, it populates correctly if we navigate to the server side page.

Is it possible to have build time queries made when building static pages cached to KV correctly? Is there something we could be doing wrong to cause this ?

Tthipperz I see, do you know if there is another way for me to fetch another worker's rout...

bun•4/10/24, 9:10 PM

RPC has zero-latency and manually requesting has latency? that's very odd, both should be regular requests i believe?

Unsmart•4/10/24, 9:13 PM

If you do a fetch over the internet instead of a fetch on the binding that would be cause for latency. But yes they would both have zero-latency done through binding

UUnsmart If you do a fetch over the internet instead of a fetch on the binding that would...

thipperz•4/10/24, 9:23 PM

How do I do a fetch on the binding? Is it something like

BINDING.fetch("/some-route", options)

BINDING.fetch("/some-route", options)

? I couldn't find an example on this

一

一块木头•4/11/24, 1:16 AM

Please help me, I don't know why this happened. https://github.com/cloudflare/next-on-pages/issues/740

GitHub

[🐛 Bug]: nextjs local preview succeeded, deployment succeeded, but ...

next-on-pages environment related information System: Platform: darwin Arch: x64 Version: Darwin Kernel Version 23.1.0: Mon Oct 9 21:27:27 PDT 2023; root:xnu-10002.41.9~6/RELEASE_X86_64 CPU: (16) x...

bun•4/11/24, 2:20 AM

pages_build_output_dir

pages_build_output_dir

should be set to

.vercel/output

.vercel/output

一一块木头 Please help me, I don't know why this happened. https://github.com/cloudflare/ne...

Rafael França•4/11/24, 3:04 AM

You need to set the “nodejs_compat” flag. In my tests, I had success when I configured the flag in the settings of the project on the dashboard.

Rafael França•4/11/24, 3:05 AM

For some reason the flag In wrangler.toml is ignored. However, In my case was a monorepo.

RRafael França You need to set the “nodejs_compat” flag. In my tests, I had success when I conf...

一

一块木头•4/11/24, 3:27 AM

Yes, it's already set.

一

一块木头•4/11/24, 3:36 AM

一一块木头 Please help me, I don't know why this happened. https://github.com/cloudflare/ne...

thanhle•4/11/24, 5:49 AM

try to add the nodejs-compact to the wrangler pages deploy command and try to re deploy because If you manually add the nodejs-compact in the dashboard, you need to redeploy to see the effect

Tthanhle try to add the nodejs-compact to the wrangler pages deploy command and try to re...

一

一块木头•4/11/24, 5:59 AM

https://github.com/hehehai/at4-kit

GitHub

GitHub - hehehai/at4-kit

Contribute to hehehai/at4-kit development by creating an account on GitHub.

一

一块木头•4/11/24, 5:59 AM

I tried again many times

thanhle•4/11/24, 6:00 AM

i saw you have prisma. this maybe not supported by next on pages

Tthanhle i saw you have prisma. this maybe not supported by next on pages

一

一块木头•4/11/24, 6:05 AM

Really? I'm using prisma and d1, so I'll switch to drizzle and give it a try.

一

一块木头•4/11/24, 6:05 AM

Do you know the specific reason why it is not supported? I see that the build and deployment was successful, but the deployed service failed.

一一块木头 Really? I'm using prisma and d1, so I'll switch to drizzle and give it a try.

bun•4/11/24, 8:35 AM

prisma d1 is supported ofc

一

一块木头•4/11/24, 10:35 AM

Yes, I know it is possible. My local preview mode is normal. The problem is that the deployment results are not accessed in pages.

一一块木头 Click to see attachment

一

一块木头•4/11/24, 10:35 AM

it is like this

一一块木头 https://github.com/hehehai/at4-kit

一

一块木头•4/11/24, 10:37 AM

Can someone try deploying this repository on pages to test it?

import WelcomeForm from '@/components/welcome/WelcomeForm' import { getAccountOfCurrentSession } from '@/lib/api/accounts/queries' export const runtime = 'edge' export default async function WelcomePage () { const account = await getAccountOfCurrentSession() return ( account && ( <main className='flex justify-center md:max-h-[80vh] md:min-h-[80vh] overflow-auto overflow-y-scroll scrollbar lg:mt-4'> <div className='flex flex-col space-y-2 max-w-[90%] md:max-w-[50%]'> <h1 className='my-4 text-2xl font-semibold text-center'> Bienvenue! Complétez votre profil avant de commencer </h1> <WelcomeForm account={account} /> </div> </main> ) ) }

Hi all. If I want to set cache settings on `fetch` in a Next.js server component or middleware. Shou

Similar Threads

Similar Threads

Similar Threads