Next JS slow initial compile time
Hello! I was hoping someone could possibly give me some advice on what I should attempt, or what I should consider with an app that I am developing at work with Next.JS. I am currently running into an issue where the initial compile of my page takes like 10-12 seconds to compile and the user is left sitting there with no indicator that its compiling. I've read that this is common for next.js projects when you try hosting it yourself, but I thought I would ask you guys. Any tips on how to speed up compile times on pages? Or should I consider restarting and creating the project using something like Go?
68 Replies
why are you running dev build on production?
I get the same result when i use npm run start sadly
10-12 seconds to compile and the user next compiles and build, but if it takes 10 seconds to run
most likely the data source is fucked
did you check from where the data on the page is loaded?I am gathering a lot of data from my database using prisma. I'm assuming that could be causing it
yeah
you should add tracing and find out why the page is taking 10 seconds to appear
I am using a promise to gather it all in a server component. Not sure if there is much else I can do to optimize that
GitHub
GitHub - axiomhq/next-axiom: The official Next.js library for Axiom.
The official Next.js library for Axiom. Contribute to axiomhq/next-axiom development by creating an account on GitHub.
Thanks! I'll set this up and take a look
i know ssr is bad, but should not be 12s bad when ssr'ing
Yeah, I've been at a loss haha. It's my first big project that I've worked on at this scale, and sadly I am the only dev so I don't have anyone to get feedback from or bounce ideas off. I appreciate the help!
To ensure the issue is with the data source try to mock the data and comment out the db fetch. (Just make an object that’s the same type as the data your prisma query is returning and write some fake data).
If the issue doesn’t go away then it’s definitely the data source (which it most likely is the case as nyx pointed out)
Check the network tab in your dev tools and verify that the fetch is what causing the delay, check the size of the response.
Try wrapping the slow component in suspense while you figure out the issue.
Does the issue also take place when you do npm start? Where is your db hosted? What’s your deployment strategy?
Lastly if this a hobby project I wouldn’t mind taking a quick look if you have a repo you can share
Hey Yiannis, I appreciate the response!
I tried a few things today to try and narrow down where the issue was.
I tried removing all of the db queries from the initial server component, that surprisingly didn't change the compile time much.
I then removed the next component and it shaved off 2 seconds. But it still took a solid 3-3.5 seconds to compile.
This issue is happening in the build when I run npm start.
My database is hosted on a local mysql database. Then I host the server on vm on our network to host it locally for the company to use.
It's still in development and I've learned a lot from building this application. But I fear this initial compile thing is going to annoy a lot of userss.
I wish I could give you access to the code to better help but I don't think I'd be allowed to share this externally.
I should mention that I got the compile time down from 11 seconds to roughly 5 seconds by dynamically loading my component and wrapping all of my queries in a promise then building. I believe I wasn't using npm start for some reason.
Is 5 seconds normal for a locally hosted project like this? Or is there still more you think i can do
I appreciate all the help ❤️
No, that’s not normal at all especially if your data source is running on the same network as the application.
How many queries are we talking? Keep in mind that an async function won’t return until all the awaited promises return, so it just be one that is causing the issue.
No worries about sharing the code.
If it’s a bunch of prisma queries two seconds is not the craziest in the world but considering you are running on a vm and the db is locally available it still is too much.
The thing that I don't get is i removed all the queries and everything inside and just returned an empty div but the compile time for that page was still 3 s
on dev most likely is okay-ish
Have you made any additional contexts you are wrapping your app?
but on build thats almost impossible without fucking up
This is on build sadly lol
Are you using next auth for authentication? If so that has a context and if there is a strange issue with your data source then that could be causing it
Ah I see
When you comment out the component, can you check the network tab in your dev tools to ensure there is no fetch requests of any kind
Sure! Let me boot up my work laptop and I'll check that now
Yeah the thing that's taking so long to fetch is something named "appointments?_rsc=1wtp7"
That is without any child components or queries on the server component i am trying to render
Do you have a trpc router called appointments?
Actually never mind that was silly to ask
I don't believe I am using trpc
Yeah sorry ignore that
No worries! Whatever it is thats causing that is making the compile time 21seconds in dev mode haha
When you do the npm start, is that on your local machine or on the vm? I mean like when you are experiencing the 5s with the empty component
The 5s was on my local machine
I didn't push any of that to production to test
Can you try and make a new blank page and render an empty sever component there and check the network tab?
Sure!
I am reading that I should make it a CSC.. but it would suprise me if all RSC are that slow..
That’s not the issue
Server components are not that slow normally
Gotcha
I will be going in a minute, just check to see if it’s the same performance in a new page with a completely blank server component or if it’s just that one
The new component took 5.8 seconds
In dev or start ?
Dev
That’s normal
And it’s a new page right?
New page yup
And the slow one in dev takes 21s?
Yeah I just restarted server and tried again. This time 19 s
Check your component tree of that page, there has to be either some fetch or some really large media files or something along these lines
With tracing you will be able to see what is taking the time
Yeah I meant to set that up today at work, but got caught up working on a few other things within the app.
Is it an easy setup?
With axiom should be easier
.
Gotcha, I will do that tomorrow and update you with my findings.
Thanks again to the both of you 🙂
I for some reason cannot get axiom to send any logs. I'm not sure if it's due to me not hosting with Vercel, but even in production it's not sending any logs unfortunately
Hey, I don’t think you need to reach for axiom on this particular issue. If you are still facing it try to check all the components on the tree to find the one causing trouble. Most dumb and straightforward way is to make a test page and start from the top of three mounting the components until you see the slow down
Currently working on this now. Just rebuilding the component tree from the ground up and trying to find out where it slows down
One thing I've noticed is.. my original component it takes 8s to load
The new component with nothing in it takes 3s to load.
Still feels quite slow for nothing in it
Did some further testing with other people accessing the site. It seems that it is just the initial server compile that is slow. Once one person access that route, it loads almost instantly for everyone else.
Then I restart the server and again the first compile is slow. Fast for everyone else.
I’m convinced you aren’t using a production build, what are you hosting it with?
I'm self hosting it on a production server
I do notice a difference between dev and prod compile times so I'm sure it's doing something different. I just don't understand why the initial compile is so slow.
I have read that self hosting isn't the greatest, but to keep the server only aseccible on our network, this was the easiest way haha
But are you using an actual production build? Or just using a dev build?
You should not be having initial compile time on a production build
What package manager are you using?
It sounds like you are using ‘npm dev’ or ‘yarn dev’ or ‘pnpm dev’ when running on your server Check out Coolify for self hosting next
It sounds like you are using ‘npm dev’ or ‘yarn dev’ or ‘pnpm dev’ when running on your server Check out Coolify for self hosting next
Npm dev when I'm testing on my local machine, but im doing npm build -> npm start on my production server
I will take a look at a Coolify, thanks!
This might be a dumb question, but if I use coolify, does that mean my app will be open to the public?
yes
if you want your app to be open only internally
you need to add a vpn or tunneling
Nah you can configure coolify itself to only listen for local IPs
I’d expect that your work network does not allow outside traffic anyways
you need to modify traefik for that
Could the self hosting really be the issue?
Next js usually is awful to deploy outside of vercel
I see I see
I self host with coolify for a website for my work just fine. It sounds to me like you have a problem with your server components fetching data without suspense
look into
<Suspense> and loading.tsx
but also look into what in your data fetching / processing is taking so long. Something tells me you are fetching way more data than is actually needed. Maybe you need to add pagination or somethingOkay... i feel like an idiot. I was using npm run start. But just didn't have NODE_ENV=production.
My app is SUPER snappy now
I'm so sorry
Thank you everyone for the replies
i did think that was the case
nextjs isn't that slow
Yeah I was just assuming npm run start was good enough 😭
I was watching the new benchmark video theo posted and was like ... oh
at least we were all right in our assumptions
:biglaugh:
I feel like such a noob 😭
Nah it really isn’t that clear tbh
Did you have NODE_ENV set to production in your .env file? I’m wondering if that would have worked as well. @Mase
Also
Shouldn’t start work only after build?
I’m doubting nextjs behaviour now
I was building, I just never had the thing set to production. It just assumed it was set by default or something idk haha.
Sadly I did not
I know the feeling. You feel great you solved the thing troubling you for ages but so mad cause it was silly 😂 we have all been there. If you will be self hosting looking into making a docker image and using docker if you don’t need coolify!
I definitely slouched back in my chair and was like ... "there ain't no way". I was so close to restarting the whole project XD
I've kinda looked into docker. I am still confused as to how it works and why it would benefit me. Is it better than just using one of our vm servers to host the project?