Next.js Discord

Discord Forum

Shadcn Sidebar Server Component

Unanswered
Great Dane posted this in #help-forum
Open in Discord
Great DaneOP
Shadcn Sidebar is a "use client" component.
I want to use it as the layout of my app but I don't want it to make all my components "client components".

I learned in the docs (https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns) that we can render a server component in a client component. And I managed to do so with a different syntax than in the docs :
 layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <EnvironmentProvider>
      <html>
        <body>
            <Sidebar serverComponent={<CustomNavUser />} children />
        </body>
      </html>
  );
}

 Sidebar.tsx
"use client";

export function Sidebar({
  children,
  serverComponent,  
}: {
  children: React.ReactNode;
  serverComponent: React.ReactNode;
}) {
  return (
    <SidebarProvider>
      <AppSidebar serverComponent children/>
    </SidebarProvider>
  );
}

 AppSidebar.tsx
export function AppSidebar({ children, serverComponent, ...props }: React.ComponentProps<typeof Sidebar> & { children: React.ReactNode, serverComponent: React.ReactNode }) {
  return (
    <Sidebar variant="inset" {...props}>
      <SidebarFooter>
        {serverComponent}
      </SidebarFooter>
    </Sidebar>
  )
}

 CustomNavUser.tsx (I want it to be a Server Component)
import { getServerUser } from "@/utils/supabase/server";
import { NavUser } from "../nav-user";
import { getProfilePictureByIdServer } from "@/utils/user/utilsserver";

export default async function CustomNavUser() {
    console.log("CustomNavUser");
    const user = await getServerUser();

    const profilePicture = getProfilePictureByIdServer(user?.id || "/default_user.svg");
    return (
        <>
            <NavUser
                user={{
                    name: "John Doe",
                    email: "toto",
                    avatar: "/user_default.svg",
                }} />
                <p>Coucou</p>
        </>
    );
}

11 Replies

Great DaneOP
And in the console I see that CustomNavUser is now a Server Component but now it just doesn't appear on the UI.

Can someone help me to make CustomNavUser a server component and beeing visible in the UI ?

Thanks a lot
Mallow bee
I think you're looking for this
 layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <EnvironmentProvider>
      <html>
        <body>
-            <Sidebar serverComponent={<CustomNavUser />} children />
+            <Sidebar serverComponent={<CustomNavUser />} />
+            {children}
        </body>
      </html>
  );
}
that will render the page contents next to your sidebar
you'll probably want a way to get the user within your client components, I'd recommend a context provider rather than trying to drill a server component down
const UserContext = React.createContext<User | undefined>(undefined)

export function useUser() {
  const user = use(UserContext)
  if (user === undefined) {
    throw new Error('useUser must be used within UserContext.Provider')
  }
  return user
}
 layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const user = await getServerUser();

  return (
    <EnvironmentProvider>
      <html>
        <body>
            <UserContext user={user}>
              <Sidebar>
              {children}
            </User>
        </body>
      </html>
    </EnvironmentProvider>
  );
}
And then your customNavUser can be a client component that works anywhere in your sidebar

"use client"
 CustomNavUser.tsx
import { getServerUser } from "@/utils/supabase/server";
import { NavUser } from "../nav-user";
import { getProfilePictureByIdServer } from "@/utils/user/utilsserver";

export function CustomNavUser() {
    const user = useUser()
    const profilePicture = getProfilePictureByIdServer(user?.id || "/default_user.svg");

    return <NavUser user={user} />         
}
Thanks a lot
Great DaneOP
The issue is that it does not solve my problem of creating server components under this big chunk of client component that is the shadcn sidebar
Mallow bee
The right way to do that is to pass children down 

return (
  <div>
    <Sidebar> // this is a client component
      <CustomNavUser> // this can be a server component
    </Sidebar>