Best way with Server component?
Unanswered
Morelet’s Crocodile posted this in #help-forum
Morelet’s CrocodileOP
Hello, I would like to know if refactoring in the following way is better than the way I have it now:
Currently: I have a page that makes 5 requests, it makes them in parallel, using Promise.all. I then distribute these results to 5 client components that receive these responses as props and do their own thing.
Refactoring: Pass the requests to the components directly, creating a server component for each one that can make the request and pass it to its client component. From the page now it is not in charge of making the requests but to place a Suspense in all the child components, each child component would be a server component that internally has a client component that receives its props.
What is the best way?
Currently: I have a page that makes 5 requests, it makes them in parallel, using Promise.all. I then distribute these results to 5 client components that receive these responses as props and do their own thing.
Refactoring: Pass the requests to the components directly, creating a server component for each one that can make the request and pass it to its client component. From the page now it is not in charge of making the requests but to place a Suspense in all the child components, each child component would be a server component that internally has a client component that receives its props.
What is the best way?
5 Replies
Tonkinese
What kind of data are you dealing with? What are all of these 5 requests?
Can some of the request happen in the root, then share the data as a context?
Morelet’s CrocodileOP
different data for fill a dashboard, various statistics
Tonkinese
Personally I would make the requests in the layout.tsx and assign the result of each request to a context then consume in each component.
American Crow
This might be a nice use case for PPR. Here is a demo https://www.partialprerendering.com/
And GitHub https://github.com/vercel-labs/next-partial-prerendering/tree/main
I am on mobile but that would be your option 2 with ppr enabled if I remember correctly
And GitHub https://github.com/vercel-labs/next-partial-prerendering/tree/main
I am on mobile but that would be your option 2 with ppr enabled if I remember correctly