Using suspense
Unanswered
Blanc de Hotot posted this in #help-forum
Blanc de HototOP
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
Blanc de HototOP
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,
@Blanc de Hotot 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.
Blanc de HototOP
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.
@Blanc de Hotot 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.