How to get near instant load time?
Unanswered
wWHYSOSERIOUSs posted this in #help-forum
Hi guys
Soo I converted my heavy page (trading)
Into a server page (earlier it was 'use clinet')
Broke down page into small components
Some of them are making api request
Few are making to same endpoint, others to a different end-point.
For data fetching I'm using reqct query where components making request to same endpoint are using same key.
Shifted the live price of crypto to a web worker freeing my main thread
Soo far soo good things are better then previous version of the page
But one issue, load time is not good
Soo I have done some research, and have seen two approaches
1. Use of loading.jsx (it will be served instantly)
2. Wrap each component that make requests using react query in a suspense
For first one I need to make a skele for my entire page
Which one is better and why
Any suggestions to make my page load faster ?
Soo I converted my heavy page (trading)
Into a server page (earlier it was 'use clinet')
Broke down page into small components
Some of them are making api request
Few are making to same endpoint, others to a different end-point.
For data fetching I'm using reqct query where components making request to same endpoint are using same key.
Shifted the live price of crypto to a web worker freeing my main thread
Soo far soo good things are better then previous version of the page
But one issue, load time is not good
Soo I have done some research, and have seen two approaches
1. Use of loading.jsx (it will be served instantly)
2. Wrap each component that make requests using react query in a suspense
For first one I need to make a skele for my entire page
Which one is better and why
Any suggestions to make my page load faster ?
46 Replies
Schneider’s Smooth-fronted Caiman
I would definitely go for option 2, to have a more precise control over your rendering optimization and user experience. I don't know your code but once you learned more about the next.js loading options you will be able to implement them, step by step.
See the code of the amazing presentation Aurora Scharff made just minutes ago
https://github.com/aurorascharff/next15-filterlist/blob/main/app/layout.tsx
https://github.com/aurorascharff/next15-filterlist/blob/main/app/layout.tsx
Sanderling
I think wrapping each component in its own Suspense would be the better solution because the components will be displayed as soon as their data is ready, instead of waiting for all the data to load, as with the loading.tsx method.
i tired the first option, well it doesnt triggers loading.jsx untill u are making a top level request in your async page
which im not soo i dont see any loading.jsx file
which im not soo i dont see any loading.jsx file
Schneider’s Smooth-fronted Caiman
it's displayed instead of an async page
Yes
Gonna use second one n share result
Schneider’s Smooth-fronted Caiman
I'm afraid you will get same results with Suspense. Currently, how are you doing your request, if it's not with top level await ?
i shifted the request to each individual component (react dedupes request) soo req to same endpoint is fine
but ,the request in those server action require user id soo my endpoint are like "/trades/user/:userId" like this and to get user Id im usng cookie function in the server action which makes the whole page dynamic
how do i get around this, any idea ?
but ,the request in those server action require user id soo my endpoint are like "/trades/user/:userId" like this and to get user Id im usng cookie function in the server action which makes the whole page dynamic
how do i get around this, any idea ?
hmmm im making these request to a dedicated backend (nodejs).
i was happy for a while that im streaiming components but i was digging my own grave by making entire page dynamic by using cookie.get("session")?.value in the server actions that i use in my components lol
Now i wonder whats the use of react server component hmmm as most of the applications are user oriented that is u need to know the user to make a request for that specific user and display content
Siamese Crocodile
generally to get instant shell returned
you would need ppr
or static rendering
I guess static rendering isnt possible in your scenario
i guess it wont be possible in any user oriented application no ?
Siamese Crocodile
PPR allows you to serve the html thats not request dependant (user profile, etc) instantly
and then stream user info later on
yup
its not stable in next 15 i guess
ppr
Siamese Crocodile
it is not
but well thats your only option
if not ppr you go full dynamic
then the initial shell wont be served
But switching from dynamic to ppr is like one line in next config
nothing else is needed
so you can try
and if it is bugged in ur scenario u can disable it
ohh nice ill try it out
else ill remove streaming, pages were static before
was using client side api request
Siamese Crocodile
You can go full static and load user client side
thats an option too
so like
u cant access request apis
but do all client side
yes that was my model before, gonna fallback to it
Siamese Crocodile
dynamic/ppr is easy to turn on off
but going from dynamic to static
is a lot of work
you have to change all of the auth flow
my auth flow is fine, my pages were "use client" earlier, broke them , removed top level use client statement and shifted api calls to leaves of the page, made my page static