Client component vs Server Component

Unanswered

Britannia Petite posted this in #help-forum

Britannia PetiteOP

2024-01-17T16:47:19.000Z

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

@Britannia Petite 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 ?.. js '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> </> ); }

Ray

2024-01-17T16:57:34.000Z

is this the root layout? the root layout cannot be client component

Britannia PetiteOP

2024-01-17T16:58:46.000Z

no this is NOT the RootLayout

@Britannia Petite no this is NOT the RootLayout

Ray

2024-01-17T17:10:26.000Z

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>
        </>
    );
}