Next.js Discord

Discord Forum

Client component vs Server Component

Unanswered
Britannia Petite posted this in #help-forum
Open in Discord
Avatar
Britannia PetiteOP
Hi,

Can I display a server component inside a client component conditionnaly base on a state ? I know about the trick {children} to render server component inside client component but I don't know how to do it here ?..

'use client';

import { NavBar, NavBarTV } from '@/components/ui';
import { useBoundStore } from '@/store/useBoundStore';
import { ReactNode } from 'react';
import '../globals.css';
import { isTV } from '@/helpers/deviceDetect';

export default function MainLayout({ children }: { children: ReactNode }) {
    const showNavbar = useBoundStore((state) => state.showNavbar);

    return (
        <>
            {showNavbar && (isTV ? <NavBarTV /> : <NavBar />)} // --> here NavBar and NavBarTV are   rendered as client component, I want them server
            <div className="relative h-full w-full">{children}</div>
        </>
    );
}

18 Replies

Avatar
is this the root layout? the root layout cannot be client component
Image
Avatar
Britannia PetiteOP
no this is NOT the RootLayout
Avatar
in this case, you could try parallel routes
export default function MainLayout({ children, navbartv, navbar }: { children: ReactNode }) {
    const showNavbar = useBoundStore((state) => state.showNavbar);

    return (
        <>
            {showNavbar && (isTV ? navbartv : navbar)} // --> here NavBar and NavBarTV are   rendered as client component, I want them server
            <div className="relative h-full w-full">{children}</div>
        </>
    );
}
@navbartv/default.tsx
@navbar/default.tsx
Avatar
Britannia PetiteOP
mmh they are not pages but components
Avatar
yes you can render the component in it
or use something else instead of state, eg searchParams
Avatar
Britannia PetiteOP
wdym ? Im not sure how to do this ?
Avatar
/?showNarbar={0,1}
Avatar
Britannia PetiteOP
lol this is an awful solution
Avatar
why is it awful?
https://mail.google.com/mail/u/1/#inbox?compose=new
gmail use search param to show the new mail modal
Avatar
Britannia PetiteOP
I don't want this to be params based, and im pretty sure there is another solution..
Avatar
this
I don't think you have another option other than these two
please tell me if you find another one