Next.js Discord

Discord Forum

Why can't I use this component within a parent that is ssr?

Unanswered
Asian black bear posted this in #help-forum
Open in Discord
Asian black bearOP
condition-component.tsx
import { type FC, type ReactNode } from "react";

export interface ConditionComponentProps {
  /** The condition on what the component will be shown. */
  condition: boolean;
  /** Component to be shown when `condition` is true */
  true: ReactNode;
  /** Component to be shown when `condition` is false - default to <div /> */
  false?: ReactNode | undefined;
}

const ConditionComponent: FC<ConditionComponentProps> = (props: ConditionComponentProps) => {
  return props.condition ? props.true : (props.false ?? <div />);
};

export { ConditionComponent };

My understanding is that this condition-component isn't specific to csr because I didn't marked it with 'use client'. And even if this is csr, isn't it fine to have csr component within ssr component? Any explanation or document reference would be much appreciated. Thank you.

8 Replies

Asian black bear
Why do you think this isn't usable?
And generally speaking, since I have a similar component, the difference where you run it is significant. Purely on the server if your condition is not satisfied the child will not be rendered at all. Used on the client, especially with a server component as a child, even if the condition is not satisfied, the child will be sent from the server to the client even if it's visible from the beginning.
Reason being that a change of client state could potentially cause the child to be rendered afterwards and thus the child needs to be known in advance.
Regarding your implementation I recommend not rendering random divs and instead render null oder undefined in order to not bloat the DOM with useless elements.
@Asian black bear Why do you think this isn't usable?
Asian black bearOP
Because NextJs throw this error. But if I commented out the ConditionComponent part the error is gone.

Here is my code

home-page.tsx
// ...
// Bunch of import

export default async function HomePage() {
  
  // ...
  // Data fetching

  return (
    <Box>
      <HeroSection
        slideshowData={slideShows}
      />
      <Container>
        <TagSection
          tags={tags.data?.items}
        />
        {
          pinSections.data?.items.map((section) => {
            return (
              <PinSection
                key={section.id}
                data={{
                  products: section.products.map((p) => p.product),
                  viewAllHref: `${ROUTES_PATH.PRODUCT_BY_SECTION.replace(":id", section.id)}`
                }}
              />
            )
          })
        }
        {/* Error occur */}
        {/* PinProductCategorySection is a client side component */}
        <ConditionComponent
          condition={!!pinCategory.data}
          true={<PinProductCategorySection
            data={pinCategory.data}
          />}
        />
        <BestSellerSection
          products={bestSellerProductData?.items as IProductResponseDto[]}
        />
        <NewArrivalSection
          products={newArrivalProductData?.items as IProductResponseDto[]}
        />
        <BlogsSection
          blogs={blogData?.data?.items as IEcommerceCMSResponseDto[]}
        />
      </Container>
    </Box>
  );
}
Lao Gan Ma
Why can't I use this component within a parent that is ssr?
You should be able to,

My understanding is that this condition-component isn't specific to csr because I didn't marked it with 'use client'.
True, it can either be a client component or a server component

And even if this is csr, isn't it fine to have csr component within ssr component?
Yes

Because NextJs throw this error.
I saw the error: have you tried stopping dev server, delete .next folder, and restart the dev server?

const ConditionComponent: FC<ConditionComponentProps> = (props: ConditionComponentProps) => {
return props.condition ? props.true : (props.false ?? <div />);
};
Have you tried wrapping the return value with a fragment?
@Asian black bear