javascripttypescriptnext.jsserver-side-renderingshadcnui

Does shadcn SidebarProvider render all its children on the client on Next.js?


Out of curiosity, shadcn's sidebar has 'use client' declaration on the top of its component file which includes the declaration of SidebarProvider. From my understanding of nextjs, when a client component is rendered, all of its children are rendered on the client side too. But the shadcn documentation encourages to wrap out entire application with the SidebarProvider. Does this not render our entire app on the client side and kill ssr as a whole?

I am pretty sure this is not the case, but how does this SidebarProvider work under the hood?


Solution

  • use client does not mean that the server side rendering is gone/killed. As mentioned in this dicussion, client components are also rendered on the server, just that they are also interactive.

    How else will we use useEffect and other client side hooks in components, if they do not run on the client once.

    And yes, as you already mentioned in the comment that server components can be passed into client components as props. A simpler mental model is explained here