Suspense and dealing with large data
I am trying to display loading states until the data is arrvied, but I am facing some struggles, for now I am making a profile page where I am fetching large user data with just one createAsync with deferStream: true, this requires me to wrap the whole page in Suspense I am thinking this will lead to me making one large loading layout for just one suspense I don't think this is convenient.
Should I be fetching user data just by one createAsync or fetch some user data seperately I have about 22.5kb of data just by one fetch. should I have multiple fetches which I think should Allow me to use multiple suspenses
here is what I am doing and what I think I should change but I want just approval or direction I might be wrong
the user has information about themselves, skills and services. for now what I am doing is just fetching everything once which leads me to using one suspense.
What I think I should be doing is making multiple fetch request for skills services and their information that will allow me to use multiple suspense so I can make desired loading states.
What approach should I take? is loading everything with just one fetch and displaying one loading state convenient?
for now
Slow 4g: takes about 11s to load and on 9s the loading state appears until that loading state the page is white screen
Fast 4g: takes about 4.29s to load and on 2.34s appears the loading state
No throttling: takes about 445ms to load and on 340ms the loading state comes in
First when I started building the page I didn't care that much about suspense just used switch and show.
I also thought for some reason that I would be able to access user().services for example and I thought I would have multiple suspenses?
In general I find this topic little confusing so if Anyone could guide me I would be thankful.
2 Replies
If you care more about the speed, then let them run in parallel
It's also the story of how things are displayed within the UI as well
Using suspense has a coloring effect that if you use suspense at the top level, every resource-reading within will trigger the nearest suspense parent
When I am using deferStream true it doesnt show the suspense fallbacks but as soon as I set it to false the fallbacks work well. Is it because of deferStream that suspenses dont work in my case?
deferStream should be waiting for all the data until rendering the suspense so it kind of skips it I guess correct me if I am wrong.
But if this is the case how can I have loading with the deferStream: true? I want to keep deferstream because of SSR.
I might be completely wrong about how these work I am new to SSR and solid as well )
So here is how I fetch the data now I changed it to multiple request so I could use multiple suspenses I guess
const user = createAsync(async () => {
const [userData, userSkills] = await Promise.all([
get_xelosani(props.params.id),
get_skills(props.params.id)
]);
return { userData, userSkills };
}, { deferStream: true });
I kind of pass down data to another component like this
<ProfileRight
user={user}
setEditingServiceTarget={setEditingServiceTarget}
setModal={setModal}
/>
<Suspense
fallback={
<p>Loading...</p>
}
>
<p class="text-xs font-[thin-font] font-bold">
შემოუერთდა {props.user()?.userData?.creationDateDisplayable}
</p>
</Suspense>
<section class="w-full flex">
<Suspense fallback={<div>
Loading...
</div>}>
<SkillCarousel skills={props.user()?.userSkills?.skills}></SkillCarousel>
</Suspense>
</section>