Question about streaming
Answered
PepeW posted this in #help-forum
PepeWOP
What is the best way of handling the following situation?
I have a homepage currently doing 2 requests inside a
The
Now I see 3 options to improve the page performance:
1. Keeping my code the same
2. Moving each of the requests in their components and wrapping them in a
=> but is it a good thing to do that for a client component because now the
3. Moving each of the requests in their components and wrapping them in a
I have a homepage currently doing 2 requests inside a
Promise.all(), one getting pictures for a carousel bannerQuery and one getting brand names brandsQuery.The
bannerData is used inside a client component (a carousel) and the brandsData is used directly inside a server component.Now I see 3 options to improve the page performance:
1. Keeping my code the same
2. Moving each of the requests in their components and wrapping them in a
<Suspense /> => but is it a good thing to do that for a client component because now the
bannerQuery will be executed client side and thus never cached?3. Moving each of the requests in their components and wrapping them in a
<Suspense /> but wrapping my <Carousel /> in a server component that handle the bannerQueryAnswered by Siberian Flycatcher
Hi.
Depends on the desired UX.
If it's okay for your users to see a loading UI until both requests are complete, then #1 is fine.
If one request is significantly slower than the other and it makes sense to start showing parts of the UI sooner, the #3 is the way.
Depends on the desired UX.
If it's okay for your users to see a loading UI until both requests are complete, then #1 is fine.
If one request is significantly slower than the other and it makes sense to start showing parts of the UI sooner, the #3 is the way.
16 Replies
PepeWOP
up
Siberian Flycatcher
Hi.
Depends on the desired UX.
If it's okay for your users to see a loading UI until both requests are complete, then #1 is fine.
If one request is significantly slower than the other and it makes sense to start showing parts of the UI sooner, the #3 is the way.
Depends on the desired UX.
If it's okay for your users to see a loading UI until both requests are complete, then #1 is fine.
If one request is significantly slower than the other and it makes sense to start showing parts of the UI sooner, the #3 is the way.
Answer
"Moving each of the requests in their components and wrapping them in a <Suspense /> => but is it a good thing to do that for a client component because now the bannerQuery will be executed client side and thus never cached?
" no its not related
" no its not related
Previously, Next would only allow page-level server-side data fetching
RSC let's you do component-level data fetching
but an "async" component cannot work in React, unless wrapped by a Suspense
there is already a top-level Suspense in Next
but ideally you should add another one close to your component
eg
async FoobarAsync() { await get Data; return <MyCarousel data={data}/> }
export Foobar() { return <Suspense fallback={loading foobars}><FoobarAsync/></Suspense> }
Foobar is an RSC and it can perefectly render a client component
in an ideal world, if the requests are not dependent on each other, yes they should leave in different component
in a real world, this might be premature optimization
I think thats option 3. in your list ?
PepeWOP
Thank you, I will go for the option 3 then ðŸ‘