How to improve Next.js performance after latest Theo video on why Nextjs is slow?
In his latest video, he highlights that it's probably bad if a page is Dynamically server rendered on demand (has the
f symbol on the build output): https://youtu.be/mMQCLQTky34?t=2244
I tried it on my app, and literally every single page is Æ’ (Dynamic) server-rendered on demand
What is going on and how can I fix that. In the screenshot provided, I am literally just rendering "hello" - why isn't that statically prerendered? Is it because of something in my root layout.tsx maybe?
Trying to sort out these components which are very simple before trying to sort out my more complex components which actually call server actions etc.Theo - t3․gg
YouTube
Why is Next.js so slow??
A lot of server component apps have been rough, but I don't think that's NextJS' fault. There's a lot to talk about with how this new model actually works...
Thank you Sevalla for sponsoring! Check them out at: https://soydev.link/sevalla
Want to see how fast NextJS can be? Check out: https://soydev.link/chat
SOURCES
https://github.com/t3dotg...
15 Replies
For context, my root layout.tsx looks like this
And the only fix I found is to add
export const dynamic = "force-static"; but I'm not sure if I'm using that correctly.
Nothing on here should be making it dynamic I think, but could you share that <AppLayout> wrapping the children?
likely this then?
@AJ i thought if you pass it as a child then it could still be server rendered. how would i correctly set up this structure where i have a global sidebar in my layout which uses state (so is a client component?)?
skill issue really
mods, ban this guy! @S88
I had this issue actually, and found out its actually the clerk provider. It basically forces everything to be dynamic. I'll try to find the issue for it, but I remember finding one
GitHub
ClerkProvider Should Not Force All Children to Render Dynamically ...
Preliminary Checks I have reviewed the documentation: https://clerk.com/docs I have searched for existing issues: https://github.com/clerkinc/javascript/issues This issue is not a question, general...
You have to move the clerk provider into a separate client only component and not use it in the root layout directly, or only wrap certain pages with the provider
@Jcampuza thanks! that sounds likely to be the issue - will play around with it to confirm.
would really suck to have to manually add/remove that from pages/components though :/
actually I did a bit more looking just to make sure and this may be incorrect. They may have fixed this by now, since I was able to get some routes rendering statically even with the clerk provider rendered in it. I think its just if you call the auth() function at all it will automatically make everything in the page its called in dynamic so you have to be careful its not being used in some component being used everywhere, or only use the hook instead.
But you'd also have to be using a newer/more recent version than when that was an issue
thanks @Jcampuza - i can confirm that removing the ClerkProvider does indeed make my static pages actually static! so there's that.
going to see about upgrading my clerkjs version and investigate the suggestions on that github issue as well
and will report back 🙂
looks like upgrading from
"@clerk/nextjs": "^5.3.1",
to
"@clerk/nextjs": "^6.14.3",
might have fixed the problem for me! needed to make some code changes because it's a major version upgrade and still haven't tested it fully though