[Nextjs | MUI | Supabase] Slow initial load on Vercel
I'm using Nextjs, MaterialUI, and Supabase.
I deployed the app to Vercel under the hobby plan and kept getting a 504 timeout error on a Free / Hobby account. Here's the link: https://meal-mind.vercel.app/
I started a pro trial with Vercel since I know they cap the load time, and now my app works. Here's the link: https://www.mealmind.app/
But there's still an extremely slow loading time to start (sometimes it loads fast though).
Locally it shows a webpack-hmr taking 6+ minutes. But on Vercel it's just the app page that loads slow.
I've tried everything to try to fix this, even worked with my mentor who's better at backend stuff than I am (I'm still pretty new to this entire tech stack) and we couldn't figure it out.
I also tried to deploy it on Netlify, and same issue.
Is there somewhere I should look or test in? Any suggestions?
9 Replies
Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: It is difficult to provide a definitive answer without further information. It is possible that the slow initial load time is due to the configuration of the Vercel or Netlify accounts, or the code itself. It is recommended to review the code and the configuration of the accounts to identify the source of the issue. SOURCES: N/A
Answer: It is difficult to provide a definitive answer without further information. It is possible that the slow initial load time is due to the configuration of the Vercel or Netlify accounts, or the code itself. It is recommended to review the code and the configuration of the accounts to identify the source of the issue. SOURCES: N/A
Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.
ambitious-aqua•2y ago
Environment variables between Vercel and Supabase are correct. The configuration seems to be correct in Vercel... The only difference was that I moved the project to a paid account so that the 10+ second load time would not get capped / timed out by Vercel. But there must be a way to shorten the load time.
afraid-scarlet•2y ago
Hey @kitkatnik, checking the issue now.
How many resources do you have?
Do you have
getServerSideProps
inside your routes?
If so, are they taking too long to resolve?ambitious-aqua•2y ago
Here's the Refine component. All resources are being used except for profiles which will be used in a later date.
ambitious-aqua•2y ago
Here's the [[...refine]].tsx file with getServerSideProps. Ignore my comments, I was just trying to understand what it does and writing it down so that I remember later lol
ambitious-aqua•2y ago
How do I check if they're taking too long to resolve?
This is what happens when I go to the website for the first time: https://www.loom.com/share/477d6ee04f47480196360b691b09d079
After the first time, it loads super quick every time. But I had to upgrade Vercel to be able to do that.
Since I can't get past the timeout on my free Hobby plan, it never loads there.
inland-turquoise•2y ago
@kitkatnik Can you use console.time feature between method calls? Let's see which call takes how much time, so we can debug it.
ambitious-aqua•2y ago
@batuhanw Here are the results from my browser console (firefox) and vscode console
ambitious-aqua•2y ago
Here's the [[...refine]].tsx code so you can see my console.time logs
And here's the authProvider.ts
So I made a very simple Refine app with CRA and then made the same app with Nextjs (both using Supabase) and I have the same slow load time issues with Nextjs, but not with CRA. Could it be an issue of using Nextjs with Supabase?