Using suspense
Unanswered
French Angora posted this in #help-forum
French AngoraOP
So im trying to implement some skeletons into this dashboard, and as I was following the docs, I noticed that I didn't completely understand how best to use suspense.
Which is better to import the suspense in the current page, and then do the api call in the component. or to do the suspense in the component call the api? I did this in my code so far but only in the
Which is better to import the suspense in the current page, and then do the api call in the component. or to do the suspense in the component call the api? I did this in my code so far but only in the
<StatusBar /> or would it be better to do this: return (
<div>
<StatusBar />
<Suspense fallback={<ActivitySkeleton />}>
<RecentActivitySection />
</Suspense>
<Suspense fallback={<MaintenanceSkeleton />}>
<OverdueMaintenanceSection />
</Suspense>
<Suspense fallback={<MaintenanceSkeleton />}>
<UpcomingMaintenanceSection />
</Suspense>
</div>
);4 Replies
French AngoraOP
Just to add context. the reason i used suspense in the other file was because i had these cards where needed to use the skeleton seperately.
the next place i need to use skeletons is with the recent activity,
the next place i need to use skeletons is with the recent activity,
@French Angora So im trying to implement some skeletons into this dashboard, and as I was following the docs, I noticed that I didn't completely understand how best to use suspense.
Which is better to import the suspense in the current page, and then do the api call in the component. or to do the suspense in the component call the api? I did this in my code so far but only in the `<StatusBar />` or would it be better to do this:
jsx
return (
<div>
<StatusBar />
<Suspense fallback={<ActivitySkeleton />}>
<RecentActivitySection />
</Suspense>
<Suspense fallback={<MaintenanceSkeleton />}>
<OverdueMaintenanceSection />
</Suspense>
<Suspense fallback={<MaintenanceSkeleton />}>
<UpcomingMaintenanceSection />
</Suspense>
</div>
);
Milkfish
I think if you're fetching the data and awaiting it in the page.tsx file, then wrapping each component in a suspense boundary is unnecessary. I only use suspense when I'm fetching the data inside of individual component, hence parallel data fetching. So I think the first code is fine, asking as you're fetching the data inside of the component.
French AngoraOP
From what I understand using the Suspense component is for when you’re loading data separately otherwise if you’re loading the whole page you can use the loading file.
@French Angora From what I understand using the Suspense component is for when you’re loading data separately otherwise if you’re loading the whole page you can use the loading file.
Rhinelander
If you want to show the data for each individual component as soon as you get the data, aka streaming, you should fetch the data inside each individual server component and wrap each one in <Suspense>. If you want to only show the data when you get all of it, you should put the skeleton of the entire page in the loading.tsx file. If you're not streaming, you don't need to fetch the data in the individual components, you can just fetch it in the page.tsx file.