Yes, I am using @Cloudflare/next-on-pages with my project.

Ppaulcq6173 Yes, I am using @Cloudflare/next-on-pages with my project.

Hard@Work•9/16/24, 2:10 PM

Yeah then you want to use https://nextjs.org/docs/pages/building-your-application/routing/api-routes

Next.js supports API Routes, which allow you to build your API without leaving your Next.js app. Learn how it works here.

paulcq6173OP•9/16/24, 2:14 PM

I am using App Router mode, so this is the reason that cause pages function not work?

Ppaulcq6173 I am using App Router mode, so this is the reason that cause pages function not ...

Hard@Work•9/16/24, 2:15 PM

I don't think so. If you use SSR of any kind with Next, then you need to use Next's API system instead of Functions

paulcq6173OP•9/16/24, 2:17 PM

ok, thank you for reply.

Ricky U•9/17/24, 11:06 AM

How do enable the compatibility flag using pages functions so i can use jsonwebcrypto? And is it the same using wrangler pages dev ./dist in local env?

Walshy•9/17/24, 11:10 AM

wrangler.toml or dash

Ricky U•9/17/24, 11:15 AM

does the wrangler.toml sit in the root /functions dir ?

Ricky U•9/17/24, 11:16 AM

I get an error :

MiniflareCoreError [ERR_FUTURE_COMPATIBILITY_DATE]: Compatibility date "2024-09-23" is in the future and unsupported

MiniflareCoreError [ERR_FUTURE_COMPATIBILITY_DATE]: Compatibility date "2024-09-23" is in the future and unsupported

when running 'npx wrangler pages dev ./dist --compatibility-date=2024-09-23'

Walshy•9/17/24, 11:19 AM

As the error says, that's in the future

Walshy•9/17/24, 11:19 AM

wrangler.toml sits in root (same as workers)

Ricky U•9/17/24, 11:20 AM

the docs : https://blog.cloudflare.com/more-npm-packages-on-cloudflare-workers-combining-polyfills-and-native-code/
say that in order top use new modules such as jsonwebtoken (which i am trying to do) i need a compat date of 2024-09-23 or later.

Walshy•9/17/24, 11:21 AM

Or set the compat flag -

nodejs_compat_V2

nodejs_compat_V2

Walshy•9/17/24, 11:21 AM

The compat date just changes the behaviour of

nodejs_compat

nodejs_compat

flag

Ricky U•9/17/24, 11:24 AM

compatibility_date = "2024-09-17"
compatibility_flags = ["nodejs_compat_v2"]

That seemed to have done it. thanks.

Ricky U•9/17/24, 11:26 AM

woohoo jsonwebtoken now on cloudflare!

�

🍋 Pandeo 🍋•9/19/24, 2:09 PM

Hello, i have a nextjs app and i want to host using Cloudflares Pages and i was figuring that the SSR part is consuming pages functions resources. And that resources is limited to 10m requests per month (and after it's 0.5$/m requests).
In the case where someone try to http flood me and generate 100m requests in 10 minutes, did i will be billed for those requests ?
And if yes, how can i avoid this problem by caching the pages functions or doing something else ?

�🍋 Pandeo 🍋Hello, i have a nextjs app and i want to host using Cloudflares Pages and i was ...

hfcRed•9/20/24, 1:53 PM

ddos protections run before your site and functions, so attacks are stopped before they even hit your service

hfcRed•9/20/24, 1:53 PM

some requests will still get through ofc but the attacker will get blocked loooooong before 100m requests

�

🍋 Pandeo 🍋•9/20/24, 1:54 PM

kk. Because i have tested it with the free tier and after my 100k request i have stopped my test to not block me for 10 days

�

🍋 Pandeo 🍋•9/20/24, 1:54 PM

https://media.discordapp.net/attachments/1252404589861277842/1286357950725886148/image.png?ex=66ee4672&is=66ecf4f2&hm=f364dffb2bfb1d7fa395dd08e107e7565599f4f034da1f95a44be8f547d4fbd1&=&format=webp&quality=lossless

�

🍋 Pandeo 🍋•9/20/24, 1:55 PM

But it's "only" 100k requests so idk if it's the same with a real attack

Rennology•9/20/24, 11:12 PM

Hey guys, I've spent the last two days trying to figure this out and still scratching my head..

I setup a clean install of an astro site with wrangler. Enabled directory mode and added a simple endpoint in functions/api/index.js. When I run

npm run preview

npm run preview

and I try to hit that endpoint using the server URL I just get a 404 error. Where am I going wrong here?

I uploaded my project on github for reference https://github.com/OptimizeAd/astro-cloudflare-functions

GitHub

GitHub - OptimizeAd/astro-cloudflare-functions

Contribute to OptimizeAd/astro-cloudflare-functions development by creating an account on GitHub.

RRennology Hey guys, I've spent the last two days trying to figure this out and still scrat...

Hello, I’m Allie!•9/20/24, 11:13 PM

When using the Astro Adapter, you must use Astro’s Server Endpoints, not Functions

Rennology•9/20/24, 11:16 PM

ok so build out the API in src/pages/api instead?

Andrei•9/21/24, 10:37 PM

Hey everyone! Anybody encountered slow functions response times?

Recently finished a migration to CF Pages of one of my Remix apps. The issue is that "Waiting for server response" timing is much slower than the whole duration of the function itself.

The

total

total

timing from the Worker is 284 ms while

Waiting for server response

Waiting for server response

from the DevTools is at 885 ms—more than 3 times slower.

Here's how I measure

total

total

export async function onRequest(
  context: EventContext<unknown, string, unknown>,
) {
  const start = performance.now()
  const response = await createPagesFunctionHandler({ build, getLoadContext })(
    context,
  )
  const end = performance.now()
  response.headers.append("Server-Timing", `total;dur=${end - start}`)
  return response
}

export async function onRequest(
  context: EventContext<unknown, string, unknown>,
) {
  const start = performance.now()
  const response = await createPagesFunctionHandler({ build, getLoadContext })(
    context,
  )
  const end = performance.now()
  response.headers.append("Server-Timing", `total;dur=${end - start}`)
  return response
}

Can't figure out where's the issue here. Is it the code, or network issues?

AAndrei Hey everyone! Anybody encountered slow functions response times? Recently finis...

nahuelluca•9/23/24, 5:33 PM

Hey i have the same issue, using Remix with d1 the response for a request with size at 1.3kb is the 2 or 3 secons

juanferreras•9/23/24, 6:08 PM

there's a lot of factors that can be happening under each scenario – but one that I understand would usually apply to all is that the larger the total amount of gzipped code your CF Pages bundles, the more expensive the overall worker startup time becomes. There's upcoming work (a new module registry being developed in workerd runtime) which would break from this and lazily eval when using dynamic imports (which most adapters/etc already do) . https://github.com/cloudflare/workerd/issues/2372

(there might as well be other factors with D1, with Remix itself, general connectivity, etc. that I'm not particularly aware of)

EDIT: actually – one thing worth trying would be to enable Smart Placement and re-deploying to see if it significantly lowers those values https://developers.cloudflare.com/workers/configuration/smart-placement/

Jjuanferreras there's a lot of factors that can be happening under each scenario – but one tha...

Andrei•9/23/24, 10:01 PM

Thanks! I've quickly looked through this GH issue, some folks even suggested there's a difference between Pages Functions and Workers, which is very interesting. However, since I'm hosting a full-stack website Cloudflare itself doesn't recommend using Workers Sites for that and instead suggests CF Pages, which I'm using right now.

In any case, I've done some tests with manual requests and there's some interesting statistics. Here's the data on the screenshot (timeline-like, everything in ms):

Fetch started

Fetch started

the baseline where the request started
```
eventTimestamp
```
```
eventTimestamp
```
- from the CF logs, I view it as moment when CF has received the request
```
onRequest start
```
```
onRequest start
```
  - Worker started its execution
    onRequest end
    onRequest end
    - Worker done (the return statement is next line)
      Fetch finished
      Fetch finished
      - the response got back to the client (total request time, aka TTFB)

Client -> Cloudflare

 = simply

 = simply

eventTimestamp

Worker execution

onRequest start

onRequest end

Cloudflare -> Client

Fetch finished

onRequest end



You can see that the most amount of time is actually spent on the way from the worker to the client.

There could be a mistake where the measured Worker end time is not correct since the



You can see that the most amount of time is actually spent on the way from the worker to the client.

There could be a mistake where the measured Worker end time is not correct since the

Date.now` only advances on I/O in workerd. I'll test this a bit later.

Another potential reason is that CF does some post-processing magic which is somehow more time consuming than the worker itself. This is also weird since I haven't turned on any CF features like WAF, cache rules, rewrites and etc.

Cloudflare Docs

Workers Sites | Cloudflare Workers docs

Use Cloudflare Pages for hosting full-stack applications instead of Workers Sites. Do not use Workers Sites for new projects.

Andrei•9/23/24, 10:11 PM

Here's another test where I added a dummy fetch call before the end time measurement to make sure the time is accurate:

export async function onRequest(
  context: EventContext<unknown, string, unknown>,
) {
  console.log("onRequest start", new Date().toISOString())
  
  const response = await createPagesFunctionHandler({ build, getLoadContext })(
    context,
  )
  
  await fetch("https://httpbin.org/get")
  console.log("onRequest end", new Date().toISOString())
  return response
}

export async function onRequest(
  context: EventContext<unknown, string, unknown>,
) {
  console.log("onRequest start", new Date().toISOString())
  
  const response = await createPagesFunctionHandler({ build, getLoadContext })(
    context,
  )
  
  await fetch("https://httpbin.org/get")
  console.log("onRequest end", new Date().toISOString())
  return response
}

The worker execution time is of course a bit longer due to this new fetch request. Yet the trend remains: a ton of time is spent after the worker is finished.

Do you have any ideas on what might be happening during that time?

Walshy•9/23/24, 10:13 PM

got a url i can hit?

Walshy•9/23/24, 10:14 PM

i can perf check it

Andrei•9/23/24, 10:14 PM

WWalshy got a url i can hit?

Andrei•9/23/24, 10:15 PM

Unfortunately, it's an auth-only service:(

I'm down to help with debugging, though.

omg_ketchup•9/24/24, 2:02 AM

I'm having trouble with nested routes in page functions... my understanding is that a file at

functions/users/friends/index.ts

functions/users/friends/index.ts

will serve a request to

/users/daniel/friends

/users/daniel/friends

, in theory displaying a list of all the friends of daniel, but Im just getting the root app page instead of function output. Do I need to just use a [[catchall]].ts file at

functions/users/[[catchall]].ts

functions/users/[[catchall]].ts

and handle all of the logic there, or am I doing something wrong?

omg_ketchup•9/24/24, 2:03 AM

To add a little context- my

functions/users/index.ts

functions/users/index.ts

file is working properly, and so is my

functions/users/[user].ts

functions/users/[user].ts

file- index displays a list of users, and [user] displays the individual user matching the route param.

WWalshy got a url i can hit?

Andrei•9/25/24, 10:26 AM

Hey again! Could you please look at my case or is there a better place to file an issue?

Really don't want it to get lost.

Appreciate it.

Walshy•9/25/24, 10:28 AM

I can't do too much without a url to test, if I have that I can trace and figure out the timings.

But best is to have a thread in #pages-help - free flowing channels are hard to not get lost in

AAndrei Hey again! Could you please look at my case or is there a better place to file a...

juanferreras•9/25/24, 2:50 PM

hey Andrei – I sent a DM with some steps I've taken recently successfully. In short feel free to create an /api OR function that returns immediately without any data fetching and one that does data fetching to compare. If the former's great and the latter isn't – see if enabling Smart Placement and re-deploying helps (issue a few requests). In a small project of mine (D1 as database) that decreases end-user TTFB from ~700ms to ~250ms (depends on where you are, where your database is, etc.).

I can't speak to the accuracy of timestamps (on whether the attribution of "after" the worker is finished is right/wrong) – the security protection on Workers to only advance on I/O has confused me in the past. For example, worker startup time inflated the first I/O operation when profiling with

performance.now()

performance.now()

when in reality it wasn't related to it but actually happened before

Original message was deleted

juanferreras•9/25/24, 7:21 PM

it might be helpful to look at https://developers.cloudflare.com/pages/tutorials/localize-a-website/

omg_ketchup•9/26/24, 6:35 PM

Does it make sense to have a separate package.json for the functions folder? Can I treat it as essentially a separate Typescript project within the root Pages project? I'm thinking about how to structure it so my functions can use stuff like database/ORM/backend packages without including them in the frontend project. I don't see any best practices on achieving this, although it does say to create a separate tsconfig.ts within /functions, so I assume package.json and everything else would work the same way...? I guess I'm just asking if there's any gotchas in this approach.

akazwz•9/27/24, 2:05 AM

I saw now remix framework worker asserts support is using pages functions build --outdir build/worker. is this anyway to add queue or email entrypoint to it?

jfx•9/27/24, 2:33 PM

hi, i'm using free tier cloudflare pages for a personal website and some basic serverless functions logic
i've really liked the product, but i'd like to know how to store logs for functions? currently i've been using real-time logging. via https://developers.cloudflare.com/pages/functions/debugging-and-logging/#limits seems they are not stored. looking for something similar to cloudwatch on AWS. do i need to pay for a cloudflare service?

jfx•9/27/24, 2:42 PM

ah it looks like workers has this functionality, and may be better suited for me after reading https://developers.cloudflare.com/workers/static-assets/compatibility-matrix/

omg_ketchup•9/29/24, 4:32 PM

So I've gotten most of my stuff working, but now I'm trying to hit a POST endpoint during local dev, and getting a 405 Method Not Allowed response. I've googled extensively, and most of the results are regarding deployed apps, and the function not being available. How can I resolve this locally? My GET endpoints are working properly, but not POST. I've added access-control-allow-methods headers, I've moved the target file into a different folder, I've tested different data, I'm getting the same result from my React app as I am in Postman... I'm not sure where else to look.

akashra•9/29/24, 11:44 PM

Hm, I've got to look in to this further, but it seems all of my HTTP GET calls to a pages function sent with application/json are ending up cached and being seen as text/html by the time they pass through wrangler. Does this sound familiar?

Ricky U•10/3/24, 5:33 AM

Do workers now support the native mongo driver?

t4•10/4/24, 1:55 AM

What's the golden path for rate limiting on pages?

Adam•10/7/24, 11:47 AM

How do you make sure your api endpoints aren't hit by just anyone? Is there a way to restrict them so my Cloudflare works are the only ones allowed to connect to my endpoints like api/foo

Sia•10/7/24, 1:26 PM

Does anyone know if Pages Functions work with supabase.js?
Essentially, does the runtime support supabase.js? Workers runtime does but don't know if they use the same runtime?

SSia Does anyone know if Pages Functions work with supabase.js? Essentially, does th...

Hello, I’m Allie!•10/7/24, 1:26 PM

They use the use the same runtime

export async function onRequest( context: EventContext<unknown, string, unknown>, ) { const start = performance.now() const response = await createPagesFunctionHandler({ build, getLoadContext })( context, ) const end = performance.now() response.headers.append("Server-Timing", `total;dur=${end - start}`) return response }

export async function onRequest( context: EventContext<unknown, string, unknown>, ) { console.log("onRequest start", new Date().toISOString()) const response = await createPagesFunctionHandler({ build, getLoadContext })( context, ) await fetch("https://httpbin.org/get") console.log("onRequest end", new Date().toISOString()) return response }

Yes, I am using @Cloudflare/next-on-pages with my project.

Similar Threads

Similar Threads

Similar Threads