Client component vs Server Component
Unanswered
Britannia Petite posted this in #help-forum
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 ?..
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
is this the root layout? the root layout cannot be client component
Britannia PetiteOP
no this is NOT the RootLayout
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
Britannia PetiteOP
mmh they are not pages but components
yes you can render the component in it
or use something else instead of state, eg searchParams
Britannia PetiteOP
wdym ? Im not sure how to do this ?
/?showNarbar={0,1}
Britannia PetiteOP
lol this is an awful solution
why is it awful?
https://mail.google.com/mail/u/1/#inbox?compose=new
gmail use search param to show the new mail modal
gmail use search param to show the new mail modal
Britannia PetiteOP
I don't want this to be params based, and im pretty sure there is another solution..
this
I don't think you have another option other than these two
please tell me if you find another one