High TTFB with Pages

Hi!

So, there're kinda two issues here.

First one is a high TTFB, averaging 500-800ms for a static Nextjs website.

I tried to fix that by creating a cache rule for the website in Cloudflare. However, after I had done that, in some occassions the website returns a blank page with no content. Refreshing a couple of times sometimes returns the correct content, looks like something went wrong with caching.

However, is it normal that the TTFB is so high with CF Pages without any extra caching setup?

BjarnOP•8/8/23, 12:03 PM

Guess it's something with the app router, if the connection is slow, the entire page is blank which I think is getting cached by some edge locations.

BjarnOP•8/8/23, 12:37 PM

I do think there's an issue here tho... CF Pages Functions (for a static site) reply really slow

BBjarn Hi! So, there're kinda two issues here. First one is a high TTFB, averaging 50...

Chaika•8/8/23, 1:34 PM

You're using next-on-pages or static export? Link to your site?

CChaika You're using next-on-pages or static export? Link to your site?

BjarnOP•8/8/23, 6:18 PM

Next-on-pages. I currently reenabled my cache rule so it's faster (https://spectate.net) but on the pages url it's slow: https://spectate-marketing-frontend.pages.dev/

BjarnOP•8/8/23, 6:20 PM

You can see here where I disabled the cache rule, TTFB goes through the roof. Can't remember it was like that before without the cache rule

Chaika•8/8/23, 6:22 PM

next-on-pages is special and uses a function to handle all requests. TTFB is really low with CF Pages and static assets, but this isn't just static assets

BjarnOP•8/8/23, 6:24 PM

That's what I thought too, the app itself (app.spectate.net) is a separate CF pages project, also Nextjs App Router with next-on-pages, its TTFB is quite low, total response takes 200-300ms including authentication etc.

This website is just a static marketing site, it doesn't do any serverside stuff, started to happen when migrated to App Router though... so I guess that has definitely something to do with it

BjarnOP•8/8/23, 6:24 PM

and maaaaaybe I see something, will get back to it asap

Chaika•8/8/23, 6:26 PM

Is the site open source or any more information? I'd ask @Better James for his help if he has time, he is the resident nextjs person and maintainer of next-on-pages. Not really sure if there's enough information to go off though. Maybe something that changed recently or some known app router quirk
Edit: opps, that was supposed to be a silent ping NotLikeThis

You could trry #next-on-pages as well

James•8/8/23, 6:52 PM

My initial thoughts would be that your route is opted into the edge runtime and doing SSR stuff, maybe sending fetch requests that take a while to complete, before returning back to the client

BjarnOP•8/8/23, 6:58 PM

Yea I see what's happening here

BjarnOP•8/8/23, 6:58 PM

Before with the pages dir, I had getStaticProps()

BjarnOP•8/8/23, 6:59 PM

During the rewrite to App Router, I of course removed that one. But still opted in to next-on-pages due to api routes. Note: all content is static from the CMS. But I guess it's now retrieving those as I haven't set the "dynamic" property, going to try to play with that

BjarnOP•8/8/23, 7:00 PM

I thought it wasn't necessary as it doesn't do any fetch or other server side calls but maybe (have to check) it's because I accidentally made the root layout an async function

James•8/8/23, 7:02 PM

Generally my view is to only opt routes into the edge runtime that need to do work on the server, otherwise leave them opted out and they'll get prerendered at build time

BjarnOP•8/8/23, 7:19 PM

Ahhh really? That's interesting, didn't know that, I just opted in everything to run on edge. Woops.

BjarnOP•8/8/23, 7:20 PM

Or at least the root layout, which forces sub segments to be edge too

BjarnOP•8/8/23, 7:22 PM

I know this isn't CF pages related, but, I'm getting this now (which is why I always opted in for edge). These should only get the latest content from the CMS, they also have generateStaticParamsgenerateStaticParams. Am I missing something here with next-on-pages?

James•8/8/23, 7:23 PM

Yeah so with dynamic routes that get prerendered, they generate a fallback nodejs function. To avoid generating a fallback function and to only prerender routes for the ones provided in generateStaticParamsgenerateStaticParams, you can do export const dynamicParams = false;export const dynamicParams = false;

BjarnOP•8/8/23, 7:24 PM

Ahhhhhhhhhhhh alright!

BjarnOP•8/8/23, 7:24 PM

I saw that in the docs indeed

BjarnOP•8/8/23, 7:27 PM

They're SSG now, but still complains about edge (same error as before)

BjarnOP•8/8/23, 7:27 PM

did you mean to also enable edge, no right?

James•8/8/23, 7:27 PM

James•8/8/23, 7:28 PM

Umm, are you sure you put the export and that you're returning paths in generateStaticParams?

BjarnOP•8/8/23, 7:29 PM

Yep :S Very similar to getStaticPaths, and if I build and run locally it does get the paths

BjarnOP•8/8/23, 7:30 PM

oh wait a sec, nope it's throwing 404's (I tested with edge still on a couple of mins ago woops)

BjarnOP•8/8/23, 7:30 PM

that's odd

James•8/8/23, 7:30 PM

James•8/8/23, 7:31 PM

Yeah, if it returns an empty array it'll try to generate a fallback function instead and ignore the route segment option saying not to

BjarnOP•8/8/23, 7:31 PM

oh dang. this change... lolsob

BjarnOP•8/8/23, 7:31 PM

^screenshot from the Prismic docs

BjarnOP•8/8/23, 7:32 PM

notice the difference.. woops.

BjarnOP•8/8/23, 7:32 PM

I'm still using the asLink helper which was required with getStaticPaths

James•8/8/23, 7:32 PM

smh

BjarnOP•8/8/23, 7:33 PM

The pain hahaha

BjarnOP•8/8/23, 7:33 PM

Aaaanyway, regarding the TTFB

BjarnOP•8/8/23, 7:34 PM

I found it pretty odd that the homepage (which isn't from the CMS, thus static) was so slow

BjarnOP•8/8/23, 7:34 PM

especially compared to my app itself which has auth etc

BjarnOP•8/8/23, 7:35 PM

This is what I saw in the Function Metrics. The worker functions were having a hard time

James•8/8/23, 7:35 PM

Oh my gosh

BjarnOP•8/8/23, 7:35 PM

Also received a couple of "CPU limits exceeded" errors which I never experienced with my app with auth middlewares etc.

JJames Oh my gosh

BjarnOP•8/8/23, 7:36 PM

Yea that was my reaction too

BjarnOP•8/8/23, 7:36 PM

For reference, this is the app ^

James•8/8/23, 7:36 PM

Well, I've not seen someone that high before I'll be honest. I wonder if that was because it was all on the edge runtime maybe when it didnt need to be

BjarnOP•8/8/23, 7:37 PM

Hmm, the app is also on the edge router for every page since I set it in the root layout

James•8/8/23, 7:37 PM

Then my second message would that your root page is probably doing some heavy lifting

BjarnOP•8/8/23, 7:38 PM

It was async, but didn't do anything. Obviously an issue, but don't think it would cause this high of a cpu time

High TTFB with Pages

Similar Threads

Similar Threads

Similar Threads