Next.js Discord

Discord Forum

layout.tsx: Meaning of use client with children

Answered
Bombay posted this in #help-forum
Open in Discord
BombayOP
I am using a Provider component in my layout.tsx. This provider.tsx look like this:

"use client";

export default function ({ children }) {
  const pathname = usePathname();

  return (
    <FrameworkContextProvider pathname={pathname}>
      {children}
    </FrameworkContextProvider>
  );
}


I simplyfied the code a little bit...

My layout.tsx looks like this:

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}


Does this mean, that my whole app is only being executed on the client, since <Providers> is a client component?

Or do server components in children still render on the server?
Answered by Cape horse mackerel
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props
View full answer

2 Replies

Answer
BombayOP
awesome thanks