Delay when loading a lot of data & navigating app
Answered
Florida White posted this in #help-forum
Florida WhiteOP
When I am navigating through my app sometimes I have a huge delay. Specially on two pages where a lot of data is fetched.
For each page I have a server component to get the data and a client component for the interactive part.
*I had a useSearchParams error yesterday, in order to fix it I have put my children in layout.tsx in a Suspense tag.
My idea was it to add pagination or infinite scroll to these huge pages to fix the delay.
Are there better ways ?
For each page I have a server component to get the data and a client component for the interactive part.
*I had a useSearchParams error yesterday, in order to fix it I have put my children in layout.tsx in a Suspense tag.
My idea was it to add pagination or infinite scroll to these huge pages to fix the delay.
Are there better ways ?
9 Replies
@Florida White When I am navigating through my app sometimes I have a huge delay. Specially on two pages where a lot of data is fetched.
For each page I have a server component to get the data and a client component for the interactive part.
*I had a useSearchParams error yesterday, in order to fix it I have put my children in layout.tsx in a Suspense tag.
My idea was it to add pagination or infinite scroll to these huge pages to fix the delay.
Are there better ways ?
If they're 2 different pages, you need to create a
loading.tsx in each folder and next will show thatand if you are trying to navigate to same page but with diff query params, say
/products?page=1, /products?page=2 then you need to add a unique key in that suspense boundary<Suspense key={`products-${page}`}/>like this
Florida WhiteOP
Right, I have a loading as a component which I already give the suspense in the layout. Should I add a suspense to each client component too? Is that what you saying ?
Answer
next will wrap your page in that suspense boundary
Florida WhiteOP
Okay, I will try out