Next.js Discord

Discord Forum

Deeply nested server components - possible and/or necessary?

Answered
Large oak-apple gall posted this in #help-forum
Open in Discord
Avatar
Large oak-apple gallOP
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?
Image
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

Avatar
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
Avatar
Large oak-apple gallOP
Is it efficient compared to client components?
Avatar
@Large oak-apple gall Is it efficient compared to client components?
Avatar
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
Avatar
Large oak-apple gallOP
I see, thanks for suggestion