Next.js Discord

Discord Forum

Deeply nested server components - possible and/or necessary?

Answered
Sphecid wasp posted this in #help-forum
Open in Discord
Sphecid waspOP
I am working on modal wizard component. It is 3-4 levels deep of client components.
This component needs at some point to send request to server and get data to render some cards for selected date (and quickly rerender when date is changed).
I would prefer to get cards already rendered (server components) instead of sending json with million props and/or manually including only necessary props (api endpoint).

Is it possible? Is it wise? What will be strategy to do it efficiently?
Answered by joulev
the only server component strategy is by spamming children everywhere
function Page() {
  return <ModalWrapper><Cards /></ModalWrapper>;
}
function ModalWrapper({ children }) {
  return <ModalMain>{children}</ModalMain>;
}
...
function CurrentScreen({ children }) {
  return (
    <>
      <Filter />
      {children}
    </>
  );
}
View full answer

4 Replies

joulev
the only server component strategy is by spamming children everywhere
function Page() {
  return <ModalWrapper><Cards /></ModalWrapper>;
}
function ModalWrapper({ children }) {
  return <ModalMain>{children}</ModalMain>;
}
...
function CurrentScreen({ children }) {
  return (
    <>
      <Filter />
      {children}
    </>
  );
}
Answer
Sphecid waspOP
Is it efficient compared to client components?
@Sphecid wasp Is it efficient compared to client components?
joulev
it's server component so it has the server component system's benefit, yes. the question is whether the increased code complexity is worth it. i think only you can answer this question
Sphecid waspOP
I see, thanks for suggestion