How to improve page performance
Unanswered
Giant wood wasp posted this in #help-forum
Giant wood waspOP
So the way i currently have my app setup isn't (in my opinion) fast, im looking to improve this.
So first i check in my middleware if the user is logged in, for that supabase recommends a simple getUser function which takes up ~13-25ms to finish
My pages request the data from supabase and then i parse that data into usable classes which i pass onto the components i have
Rendering the homepage for example takes ~160ms to 1509ms max which is very suboptimal.
Is there a way i can render the page quickly and have some loading/skeleton divs so that the user has fast feedback? What is a recommended way of handling this?
So first i check in my middleware if the user is logged in, for that supabase recommends a simple getUser function which takes up ~13-25ms to finish
My pages request the data from supabase and then i parse that data into usable classes which i pass onto the components i have
Rendering the homepage for example takes ~160ms to 1509ms max which is very suboptimal.
Is there a way i can render the page quickly and have some loading/skeleton divs so that the user has fast feedback? What is a recommended way of handling this?
23 Replies
make fetching atomic
dont fetch in the page level
fetch in small components
and call them
with Suspense
and if you have a slow loading page, use a loading.tsx to show a loading spinner for the page itself
go through this
Giant wood waspOP
right right, i currently use atomic design to build my components. would you recommend having a new component for each one on the page which does the fetch and passes it on? or build it directly in the component?
other thought: what if you have a list of races and you want to fetch the data for that race. how do you know which race its gonna need to be?
other thought: what if you have a list of races and you want to fetch the data for that race. how do you know which race its gonna need to be?
First part
Depends on you tbh, just make sure to keep fetches as atomic and local as possible. You don't want it fetching for no reason
Depends on you tbh, just make sure to keep fetches as atomic and local as possible. You don't want it fetching for no reason
Second part
For that race? If you mean like a grid view of all the races.. you can fetch the IDs on a page level, and then map over the IDs and suspense and fetch each race as its own component
For that race? If you mean like a grid view of all the races.. you can fetch the IDs on a page level, and then map over the IDs and suspense and fetch each race as its own component
Giant wood waspOP
right right so each "box" has a call to get the relevant data
i think this can greatly help my performance! i'll ping you back if i got future questions :)
Sure
Giant wood waspOP
so i got a problem with this page, so i have this switch on the top which uses a
useState which doesn't work on server sided functions (to get the supabase data). So im stuckuse the url to store the state
that way you dont need to wrap everything in a client component and pass props everywhere
just one button at the top of your page which sets the url as needed
and your components using the url directly
Giant wood waspOP
the examples that he uses still have the
use prefix correct? that means it needs to be a client component^
Use is optional, I was just giving ideas