Cloudflare Developers•2y ago

yes... I can't agree more, the two flags confused me for a while 😅 but hey... technical limitatio

yes... I can't agree more, the two flags confused me for a while

but hey... technical limitations are technical limitations

Nob•3/30/24, 11:30 AM

I have a question, is it a good idea to have link prefetch enabled by default ?

Nob•3/30/24, 11:30 AM

I get like 30 worker executions per page just because nextjs like to prefetch everything

NNob I have a question, is it a good idea to have link prefetch enabled by default ?

James•3/30/24, 12:42 PM

I would say no personally, simply because of the amount of unnecessary requests it causes

JJames I would say no personally, simply because of the amount of unnecessary requests ...

Nob•3/30/24, 12:58 PM

i created a custom link component that set prefetch=false automatically, idk why nextjs enabled it by default

Nob•3/30/24, 12:58 PM

and I dont see a big difference in load time

James•3/30/24, 12:59 PM

the cynical view would be more requests = more money

James•3/30/24, 12:59 PM

I understand the benefits behind prefetching, but I don't understand the need to prefetch everything in the viewpoint. on hover, sure, but not the viewport.

JJames I understand the benefits behind prefetching, but I don't understand the need to...

Nob•3/30/24, 1:01 PM

yes but in nextjs you can either disable it completly (not even on hover) or enable for viewport

Nob•3/30/24, 1:08 PM

I think they do that because they will get more money from vercel

James•3/30/24, 1:11 PM

I never realised you couldn't have hover only. that sounds like a worthwhile feature to add

DDario <@459755459117711362> yeah I thought that too, but my current understanding is t...

zegevlier•3/30/24, 1:15 PM

Does that not go against the backwards compatibility philosophy of workers? Putting it somewhere other than the runtime because that allows for breaking changes seems to me like trying to exploit a "loophole" in the rules around backwards compatibility.

zegevlier•3/30/24, 1:15 PM

Please correct me if I'm wrong

James•3/30/24, 1:15 PM

I thought the plan was to get rid of the node_compat nonsense /shrug

DDario yes... I can't agree more, the two flags confused me for a while 😅 but hey......

Isaac McFadyen•3/30/24, 1:29 PM

Technical limitations are technical limitations but naming them similar sounding (and same meaning things) when they're different doesn't really sound like a technical limitation?

IIsaac McFadyen Technical limitations are technical limitations but naming them similar sounding...

DarioOP•3/30/24, 3:34 PM

again, I totally totally agree

historical reasons?!

Zzegevlier Does that not go against the backwards compatibility philosophy of workers? Putt...

DarioOP•3/30/24, 3:36 PM

mh.... well, the "somewhere other than the runtime" is wrangler, since that is a built time flag, and that is under semver... is that really a loophole?

Nob•3/30/24, 3:52 PM

How do i test my api routes db calls from local development, like accessing kv from next dev

DDario mh.... well, the "somewhere other than the runtime" is wrangler, since that is a...

zegevlier•3/30/24, 4:01 PM

It would require you to stick with old, unsupported, versions of wrangler if you want to make sure your worker keeps working as expected. The only reason I can see for not using compat dates is because you plan to break backwards compatibility at some point, and that feel very wrong to me in workers. While you are correct that this wouldn't technically violate the backwards compatibility guarantees (a change in this wouldn't be a change in the runtime, and deployed workers would keep working), it still doesn't sit right with me.

Deo Kumar•3/30/24, 6:37 PM

Does blob: fetch not work on next on pages?
Like:

fetch(new URL("../noto-sans.ttf.bin", import.meta.url))

fetch(new URL("../noto-sans.ttf.bin", import.meta.url))

The above works in development mode but doesn't work when using npx wrangler pages dev

Deo Kumar•3/30/24, 6:38 PM

Also, I think this is the reason why @vercel/og doesn't work with next-on-pages?

DDeo Kumar Also, I think this is the reason why @vercel/og doesn't work with next-on-pages?

Nob•3/30/24, 9:52 PM

@vercel/og works with next-on-pages

Zzegevlier It would require you to stick with old, unsupported, versions of wrangler if you...

DarioOP•3/30/24, 11:18 PM

I see... the way I see it is sort of like: we don't have a perfect solution, so, instead of adding to the runtime something half-baked/problematic right now (thus committing to it forever) let's find an intermediate solution that can help people out to some degree, best-effort like. That being the build time node_compat flag.

That does make sense to me.

Also people with much more knowledge in that area than me made the decision above (which I don't know how set in stone is to be honest), people who know the downsides and maintenance burden of adding such polyfills into the runtime, so I trust their judgment

, but if you want I am totally happy to pass your feedback along or see if I can connect you directly with them

NNob @vercel/og works with next-on-pages

DarioOP•3/30/24, 11:20 PM

yeah it should!

(
although there's a small bug that makes it potentially fail sometimes

as you can see near the bottom here: https://github.com/cloudflare/next-on-pages/issues/39
)

GitHub

[🐛 Bug]: `@vercel/og` doesn't work · Issue #39 · cloudflare/next-on...

I'm having issues getting my project to successfully deploy on Cloudflare because I am relying on a dependency (@vercel/og) which uses satori/wasm. The Vercel building process goes fine but whe...

DDeo Kumar Does blob: fetch not work on next on pages? Like: ``` fetch(new URL("../noto-sa...

DarioOP•3/30/24, 11:21 PM

it should work...

(could you maybe share a repro?

)

Kimitri•3/31/24, 4:37 AM

I installed @cloudflare/next-on-pages on my aplication and it alert a lot of vulnerability

npm audit report

debug 4.0.0 - 4.3.0
Regular Expression Denial of Service in debug - https://github.com/advisories/GHSA-gxpj-cx7g-858c
fix available via npm audit fixnpm audit fix
node_modules/@vercel/fun/node_modules/debug
@vercel/fun <=1.1.0
Depends on vulnerable versions of debug
Depends on vulnerable versions of semver
node_modules/@vercel/fun
vercel 28.12.3 >=32.0.2
Depends on vulnerable versions of @vercel/fun
Depends on vulnerable versions of @vercel/node
node_modules/vercel

semver 7.0.0 - 7.5.1
Severity: moderate
semver vulnerable to Regular Expression Denial of Service - https://github.com/advisories/GHSA-c2qf-rxjj-qqgw
fix available via npm audit fixnpm audit fix
node_modules/@vercel/fun/node_modules/semver

undici <=5.28.2
Undici proxy-authorization header not cleared on cross-origin redirect in fetch - https://github.com/advisories/GHSA-3787-6prv-h9w3
fix available via npm audit fixnpm audit fix
node_modules/@vercel/node/node_modules/undici
@vercel/node 2.14.0 || >=3.0.2
Depends on vulnerable versions of undici
node_modules/@vercel/node

6 vulnerabilities (3 low, 3 moderate)

GitHub

CVE-2017-16137 - GitHub Advisory Database

Regular Expression Denial of Service in debug

GitHub

CVE-2022-25883 - GitHub Advisory Database

semver vulnerable to Regular Expression Denial of Service

GitHub

CVE-2024-24758 - GitHub Advisory Database

Undici proxy-authorization header not cleared on cross-origin redirect in fetch

DDario it should work... 😓 (could you maybe share a repro? 😅)

Deo Kumar•3/31/24, 8:01 AM

Thanks but today when I built the app without making any changes, it started working. I don't know how and why

Deo Kumar•3/31/24, 8:05 AM

https://www.npmjs.com/package/@cf-wasm/og

https://www.npmjs.com/package/@cf-wasm/resvg

https://www.npmjs.com/package/@cf-wasm/satori

I published npm package by forking vercel/og and it supports svg output

npm

@cf-wasm/og

Generate Open Graph Images dynamically from HTML/CSS without a browser.. Latest version: 0.1.12, last published: 2 hours ago. Start using @cf-wasm/og in your project by running npm i @cf-wasm/ognpm i @cf-wasm/og. There are no other projects in the npm registry using @cf-wasm/og.

npm

@cf-wasm/resvg

A high-performance SVG renderer and toolkit, powered by Rust based resvg.. Latest version: 0.1.12, last published: 2 hours ago. Start using @cf-wasm/resvg in your project by running npm i @cf-wasm/resvgnpm i @cf-wasm/resvg. There is 1 other project in the npm registry using @cf-wasm/resvg.

npm

@cf-wasm/satori

Enlightened library to convert HTML and CSS to SVG.. Latest version: 0.1.12, last published: 2 hours ago. Start using @cf-wasm/satori in your project by running npm i @cf-wasm/satorinpm i @cf-wasm/satori. There is 1 other project in the npm registry using @cf-wasm/satori.

DDeo Kumar Thanks but today when I built the app without making any changes, it started wor...

DarioOP•3/31/24, 8:44 AM

it may be related to the runtime issue I mentioned

let's keep an eye on it

DDario yeah it should! 🙂 ( although there's a small bug that makes it potentially fai...

Nob•3/31/24, 10:38 AM

yes i know but only if you have paid plan

Nob•3/31/24, 10:39 AM

because with free plan vercel/og is too big

bun•3/31/24, 2:18 PM

is it only me or does anyone have this issue where when you fix a syntax error the compiler error persists before you restart the whole dev server?

bun•3/31/24, 2:20 PM

tbh its not only for syntax error but for any error wow

bun•3/31/24, 2:21 PM

the error gets dismissed when you do some kind of change, but for any hard reloads the error comes back until you restart the dev server

thanhle•3/31/24, 4:54 PM

do you have any suggest for the package of fetching data in Workers. I use fetch but it is inconvenient. Axios is not compatible with edge run time.

Tthanhle do you have any suggest for the package of fetching data in Workers. I use fetc...

Hello, I’m Allie!•3/31/24, 4:57 PM

Fetch is the way to fetch data on Workers. You could probably write something similar over a TCP socket, but that would be a lot more work, and a lot less ergonomic

James•3/31/24, 5:37 PM

why do you need a package to fetch data?

JJames why do you need a package to fetch data?

thanhle•3/31/24, 5:38 PM

I got it. fetch is fine for me. Ijust consider other package. Cause in nodejs I mainly use axios, so I thought edge runtime also support axios

thanhle•3/31/24, 6:59 PM

I try to use R2binding in next-on-pages. As fas as I understand, It only work locally when I run npm run dev. I mean it creates the r2 folder in the .wrangler. Is there anyway I can interact with the remore resource R2 in cloudflare when running "npm run dev" in nextjs app using next-on-pages.

Tthanhle do you have any suggest for the package of fetching data in Workers. I use fetc...

bun•3/31/24, 8:28 PM

you can check out my library https://github.com/sunneydev/requestly

thanhle•4/1/24, 2:56 AM

Upon inspecting the _worker.js folder in the .vercel/output directory after running "npx @cloudflare/next-on-pages" in my Next.js app, I noticed a JSON file named "nop-build-log.json." It's hefty, around 262 kB, free tier limit for Workers is 1 MB after gzip compression. My question is: Is the "nop-build-log.json" file essential for running the application? Also, does Cloudflare Pages upload this file during deployment via the dashboard with Git integration?

P.S.: Cloudflare is fantastic! I truly enjoy using their services, especially the supportive community. I plan to upgrade my account to a paid tier eventually, as my application will likely exceed the 1 MB limit in the future. My point here is to try to reduce the bundle size of the code and understand how the system works.
Thank you all.

Tthanhle Upon inspecting the _worker.js folder in the .vercel/output directory after runn...

Hello, I’m Allie!•4/1/24, 6:58 AM

It's only counted if it is imported by the _workers.js_workers.js file, which I'm going to guess it isn't. Then it is instead subject to the 25 MiB per-file limit

Tthanhle Upon inspecting the _worker.js folder in the .vercel/output directory after runn...

James•4/1/24, 11:14 AM

that file isn't included in the uploaded deployment

JJames that file isn't included in the uploaded deployment

thanhle•4/1/24, 1:47 PM

thank James