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

R

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

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

A

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

total

total timing from the Worker is 284 ms while

Waiting for server response

Waiting for server response

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

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
}

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

N

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

J

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

A

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

Fetch started

Fetch started

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

Client -> Cloudflare

 = simply

= simply

 = 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



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.

A

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
}

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?

W

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

got a url i can hit?

W

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

i can perf check it

A

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

WWalshy got a url i can hit?

A

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

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

I'm down to help with debugging, though.

O

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

functions/users/friends/index.ts

functions/users/friends/index.ts will serve a request to

/users/daniel/friends

/users/daniel/friends

/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

functions/users/[[catchall]].ts

functions/users/[[catchall]].ts and handle all of the logic there, or am I doing something wrong?

O

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

To add a little context- my

functions/users/index.ts

functions/users/index.ts

functions/users/index.ts

functions/users/index.ts file is working properly, and so is my

functions/users/[user].ts

functions/users/[user].ts

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?

A

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.

W

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

J

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()

performance.now()

performance.now() when in reality it wasn't related to it but actually happened before

Original message was deleted

J

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

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

O

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.

A

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?

J

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?

J

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/

O

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.

A

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?

R

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

Do workers now support the native mongo driver?

T

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

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

A

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

S

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

H

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

They use the use the same runtime

O

omg_ketchup•10/9/24, 4:26 AM

I'm having trouble setting up vitest with Pages Functions. All the documentation is for Workers, and I'm trying to make it work, but... yeah. For example- I can't seem to get the "cloudflare:tests" imports to work. I'm also not sure about hitting endpoints- do I need to create a worker that replaces fetch and then use that? I thought that was a workers-only thing and wasn't necessary for Pages.

R

Ricky U•10/13/24, 1:55 PM

i created a function that redirects based on hostname, but how do i triger it to run on certain conditions, i.e. if a hostname does not match *mydomain.com then redirect...

R

Ricky U•10/13/24, 3:56 PM

do snippets work on pages -> custom domains? at the account level?

U

Uri_mart10•10/13/24, 4:07 PM

Hello! A quick question, how can i use the packages installed with npm inside the functions? If i want to import a module i have the error: Cannot find module ...... What is the right way? , thanks

U

Uri_mart10•10/13/24, 4:17 PM

For example if i want to use bcrypt inside functions. " import bcrypt from 'bcrypt' "

UUri_mart10 For example if i want to use bcrypt inside functions. " import bcrypt from 'bcry...

I

Isaac McFadyen•10/13/24, 4:20 PM

In this case

bcrypt

bcrypt

bcrypt

bcrypt won't work anyway because it uses node-gyp and links to OpenSSL and Workers don't support native Node modules (ones that link to C++).

U

Uri_mart10•10/13/24, 4:36 PM

And if i want to use @tsndr/cloudflare-worker-jwt inside functions for example? How can import it and find the module?

Original message was deleted

R

Ricky U•10/13/24, 4:47 PM

if snippets are at the zone level (not account level) then they wont work with custom domain names? i.e. my pages domain is "mycompany.com", but my custom domain for my client is "docs.clientA.com" with a cname to mycompany.com (pages) i've tried a single redirect, and it did not work, .. bulk redirect works but is limited in advanced matching. ...

IIsaac McFadyen In this case `bcrypt` won't work anyway because it uses node-gyp and links to Op...

R

Ricky U•10/13/24, 4:50 PM

is this still the case with the new compatibility flag : nodejs_compat_v2... jsonwebtoken works, i was wondering if bcryptjs would work (bcryptjs explicitly says "Optimized bcrypt in JavaScript with zero dependencies, unlike bcrypt which is based on c++) -- still hoping for mongodb driver support too

Original message was deleted

R

Ricky U•10/13/24, 4:52 PM

when you mean function, yuo mean pages function(workers) so ive written a worker but how can i trigger it based on rules... not sure where to set the rule, i.e. if hostname != 'xxx' then trigger function.

R

Ricky U•10/13/24, 4:53 PM

path name is /contact or /about, what i need is a redirect based on hostname (which includes all the custom domains in my pages project)

R

Ricky U•10/13/24, 4:55 PM

i see, okay so then i will need the fuction to run on every request. is this set in worker routes? i.e. on * run the worker name :xxx

R

Ricky U•10/13/24, 4:56 PM

i would prefer to put the expression not hostname === 'mycompany.com' then run the function to redirect. but cant seem to do that expression in worker routes

R

Ricky U•10/13/24, 4:59 PM

i am using pages actually. okay so thats where i have been going wrong.. so i create a function in /function dir. but how can i trigger it

R

Ricky U•10/13/24, 5:01 PM

ah right, so i need to call this api from my front end, but that means my frontend (pages project) gets hit first, and then i need to make a call to check to redirect...

R

Ricky U•10/13/24, 5:01 PM

this is a bit late in the lifecycle i think for what we are trying to acheive..

R

Ricky U•10/13/24, 5:03 PM

what we have now is a script in the head of our index.html that checeks the url hostname and does the logic and redirect there, this works, but isn't ideal, was hoping i can do this within cloudflare before frontend is loaded.

R

Ricky U•10/13/24, 5:06 PM

Its a single page app, we call the /contact (example) wait for the result and redirect... seems like it will be similar to doing it on the frontend in the browser using window.location.href = 'new domain' .. when you say function will run before assets, but that is only becuase i need to call the /function/contact early in my application

R

Ricky U•10/13/24, 5:06 PM

thanks will see how it works...

U

Uri_mart10•10/13/24, 6:38 PM

How can i use the modules in functions, im lost

U

Uri_mart10•10/13/24, 6:40 PM

or this: "@tsndr/cloudflare-worker-jwt"

U

Uri_mart10•10/13/24, 6:41 PM

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

Similar Threads

Similar Threads

Similar Threads