I don't understand why they're being bundled together with the page, pushing it over the size limit.

I don't understand why they're being bundled together with the page, pushing it over the size limit. It's like if all my API routes got combined into one, and then also got combined with the pages in which they're used. It wouldn't make much sense, because they should all be independent and all have their own size limit.

I may be using them wrong but I'm using server actions as a replacement for my API routes(at least ones that mutate data), but it seems that just using them instead makes for a less efficient app because everythings bundled together like it wouldn't otherwise be?
(I do realize I can easily avoid this problem by just using API routes instead but that's much less convenient)

FFrostTaco I don't understand why they're being bundled together with the page, pushing it ...

Hard@Work•7/2/24, 9:51 AM

It's not being bundled with the page. All things that happen on the server(SSR stuff, Server Actions, API Routes, the actual Router) are uploaded together, and if they go over the limit, then it throws that error

HHard@Work It's not being bundled with the page. All things that happen on the server(SSR s...

FrostTacoOP•7/2/24, 10:14 AM

So that error means all my server code combined is too big?

FFrostTaco So that error means all my server code combined is too big?

Hello, I’m Allie!•7/2/24, 10:34 AM

Yes, though as Nob noted, the Paid Workers plan has larger Server size limits

FrostTacoOP•7/2/24, 11:34 AM

How can I determine how big my site(or whatever is included in the size of a function) actually is then? I thought it might be

.vercel/output/static/_worker.js

.vercel/output/static/_worker.js

but that's only 27KB for me

FFrostTaco How can I determine how big my site(or whatever is included in the size of a fun...

Hard@Work•7/2/24, 11:35 AM

Do you see any import statements within that file?

FrostTacoOP•7/2/24, 12:05 PM

I do but they're dynamic without exact paths.
Looks like maybe it's importing things in

__next-on-pages-dist__/functions/

__next-on-pages-dist__/functions/

in which case there is a file there that's over 1MB.
That file though has the name of the route to my page I used the server actions on. The server actions are quite literally what my API routes were(and looking through old build logs the API routes totaled < 100KB).
I'm trying to convert back to API routes to see what happens. Could be maybe that compression or minimization is worse when everything is in one route?

FFrostTaco I do but they're dynamic without exact paths. Looks like maybe it's importing th...

Hard@Work•7/2/24, 12:10 PM

It shouldn't be

FrostTacoOP•7/2/24, 12:57 PM

Ok think I figured out my issue... My page was static before, but I forgot I switched it to the edge runtime to use actions...

Knowing I can't use edge runtime without being over the max size, without paying I really am just going to have to stick to API routes?

FFrostTaco Ok think I figured out my issue... My page was static before, but I forgot I swi...

Nob•7/2/24, 4:06 PM

you should be able to use server actions without paying

Nob•7/2/24, 4:06 PM

maybe you use a lib thats too big

st•7/3/24, 3:52 PM

export async function getData(slug: string) {
  
  const response = await fetch(
    `https://data.retuning/api/data/${slug}`,
    {
      headers: {
        "Api-Access-Key": "XXXX",
      },
    }
  );

  const slugResult = (await response.json()) as unknown as SlugData;

  return slugResult;
}

export async function getData(slug: string) {
  
  const response = await fetch(
    `https://data.retuning/api/data/${slug}`,
    {
      headers: {
        "Api-Access-Key": "XXXX",
      },
    }
  );

  const slugResult = (await response.json()) as unknown as SlugData;

  return slugResult;
}

`

When I try use cache keys in fetch request, I get "The 'cache' field on 'RequestInitializerDict' is not implemented." What is the correct way of caching this data with next-on-pages?

st•7/3/24, 3:59 PM

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

Sst ```js export async function getData(slug: string) { const response = await ...

st•7/3/24, 5:56 PM

By the way, If I leave this as it is data is not cached...

Sst ```js export async function getData(slug: string) { const response = await ...

ixixix•7/3/24, 9:21 PM

The

cache

cache

field doesn't work on workers runtime. You can try

next.revalidate: false

next.revalidate: false

to force cache

ixixix•7/3/24, 9:22 PM

https://nextjs.org/docs/app/api-reference/functions/fetch#optionsnextrevalidate

Functions: fetch | Next.js

API reference for the extended fetch function.

st•7/3/24, 10:47 PM

i did that, but it's not working either, maybe I am having the same issue with these guys: https://github.com/cloudflare/next-on-pages/issues/799

GitHub

[🐛 Bug]: Next fetch caching having issues in next-on-pages@1.11.3 ·...

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...

st•7/3/24, 10:51 PM

i started using my own implementation

const cache = await caches.open(name);

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

...

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

const cache = await caches.open(name);

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

...

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

st•7/3/24, 10:51 PM

and it's working, so I guess something is broken with the library

AAlec | Kriebel LLC.Thank you! I've confirmed that downgrading to Next.js 13 without other code chan...

James•7/4/24, 10:50 AM

Hi again. I've upgraded my cloudy repo to Next.js 14.2.4 but I'm not encountering this issue. Is there any specific logic happening on pages/routes where you're encountering it?

FFrostTaco I don't understand why they're being bundled together with the page, pushing it ...

James•7/4/24, 10:52 AM

Calling an action makes a HTTP request to the current page the action is being called from, so their code is included as part of the function for the page.

Rohit Verma•7/4/24, 11:36 PM

Can I create an async queue consumer or is there any other way to perform an action in background/ response a for webhook

Aalejoskyhitz Hey everyone! I'm getting this as well and it is so bad, it completely blows up ...

dzoni•7/5/24, 11:30 AM

I had a similar error, fixed with the edge runtime included in my server side component

whois | API man•7/5/24, 8:06 PM

I have a server side component (/api) that does the connection between Resend and my app.

My question is, I have to do something on my Cloudflare Dashboard so that this works?

whois | API man•7/5/24, 8:07 PM

Because before I deployed my app it worked and after deploying it, it gives Internal Server Error

James•7/6/24, 9:22 AM

what is the error that it's logging

Sheng•7/7/24, 1:35 AM

Does anyone know how to run a cronjob with next-on-pages, nextjs 14?

SSheng Does anyone know how to run a cronjob with next-on-pages, nextjs 14?

Hello, I’m Allie!•7/7/24, 8:05 AM

Pages doesn’t support Crons

nxc•7/7/24, 11:28 PM

Hey all

I deployed a fresh nextjs app using pages + wrangler and its awesome!

I have an existing nextjs app that was not bootstrapped using

npx create cloudflare

npx create cloudflare

I'm wondering if its possible to opt-in after the fact and still be able to deploy to cloudflare?

nxc•7/8/24, 12:41 AM

Looks like there's a good amount of trimming I'd need to do to get this project able to run on the edge

Nnxc Looks like there's a good amount of trimming I'd need to do to get this project ...

Nob•7/8/24, 1:01 AM

was pretty easy for me

nxc•7/8/24, 1:02 AM

Some of my configs rely on

node:url

node:url

and

node:fs

node:fs

Nob•7/8/24, 1:02 AM

maybe if you have some unsupported dependencies you might have to find workarounds

NNob was pretty easy for me

nxc•7/8/24, 2:24 AM

How do you find out which package is incompatible?

LH•7/8/24, 5:32 AM

Hi! Does anyone have experience or a guide on how to migrate from Next on Pages to a barebones "Next on Workers" implementation? Logs and Cron requirements are making things a bit impossible to continue.

LLH Hi! Does anyone have experience or a guide on how to migrate from Next on Pages ...

James•7/8/24, 10:38 AM

Not sure I understand what you mean by 'next on workers'. Our CLI generates a worker which is deployed as part of your pages deployment. if you wanted, you could modify the worker we generate if that's the kind of thing you want to do?

AAnay-208 I've a nextjs app hosted with pages. Now, I've an api route which basically sen...

Nob•7/8/24, 5:03 PM

KV or Durable Objects seem good for that

AAnay-208 read the last line. On price estimation, it seemed to be too high

Nob•7/8/24, 5:04 PM

KV is very cheap

Nob•7/8/24, 5:04 PM

so it should not be that expensive just to check a value in kv

AAnay-208 I’ll be writing on every read

Nob•7/8/24, 5:06 PM

once the guy exceeds the limit you don't have to write anymore

Nob•7/8/24, 5:09 PM

5$/million is not that much

Nob•7/8/24, 5:09 PM

and cloudflare cdn already protects you before workers

export async function getData(slug: string) { const response = await fetch( `https://data.retuning/api/data/${slug}`, { headers: { "Api-Access-Key": "XXXX", }, } ); const slugResult = (await response.json()) as unknown as SlugData; return slugResult; }

I don't understand why they're being bundled together with the page, pushing it over the size limit.

Similar Threads

Similar Threads

Similar Threads