Client component in server component
Answered
Spectacled bear posted this in #help-forum
Spectacled bearOP
This is the layout file in the root component
The TimeDisplay is an client component as I have mentioned the 'use client' tag in it. But still it seems that it is rendered in server as im getting hydration error
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<div className="flex gap-4 min-h-screen">
<Sidebar />
<div className="p-4 pl-0 w-full">
<TimeDisplay />
{children}
</div>
</div>
</ThemeProvider>The TimeDisplay is an client component as I have mentioned the 'use client' tag in it. But still it seems that it is rendered in server as im getting hydration error
Answered by Ray
if it doesn't need to be SSR, then you could use
dynamic to import it with ssr disabled like soconst TimeDisplay = dynamic(() => import('./time-display'), { ssr: false })2 Replies
@Spectacled bear This is the layout file in the root component
`<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
<div className="flex gap-4 min-h-screen">
<Sidebar />
<div className="p-4 pl-0 w-full">
<TimeDisplay />
{children}
</div>
</div>
</ThemeProvider>`
The TimeDisplay is an client component as I have mentioned the 'use client' tag in it. But still it seems that it is rendered in server as im getting hydration error
it is because client component will be rendered on server too
if it doesn't need to be SSR, then you could use
dynamic to import it with ssr disabled like soconst TimeDisplay = dynamic(() => import('./time-display'), { ssr: false })Answer