Client component vs Server Component
Unanswered
Britannia Petite posted this in #help-forum
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
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
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
is this the root layout? the root layout cannot be client component
![Image](https://cdn.discordapp.com/attachments/1197220618572140615/1197223213311217775/image.png?ex=65ba7c01&is=65a80701&hm=87828f56c7e2da9178de2bb290b4b843d60f7b02c553014fbed4b75225919314&)
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
Britannia PetiteOP
no this is NOT the RootLayout
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
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](https://cdn.discordapp.com/embed/avatars/4.png)
Britannia PetiteOP
mmh they are not pages but components
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
yes you can render the component in it
or use something else instead of state, eg searchParams
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
Britannia PetiteOP
wdym ? Im not sure how to do this ?
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
/?showNarbar={0,1}
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
Britannia PetiteOP
lol this is an awful solution
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
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
![Avatar](https://cdn.discordapp.com/embed/avatars/4.png)
Britannia PetiteOP
I don't want this to be params based, and im pretty sure there is another solution..
![Avatar](https://cdn.discordapp.com/avatars/743561772069421169/3c5d689eee4459a24fc420063411c016.webp?size=256)
Ray
this
I don't think you have another option other than these two
please tell me if you find another one