Client-Component Wraps Server-Component

Answered

sudo posted this in #help-forum

2024-05-18T16:25:27.546Z

Hello,
NextJS 14 App Router.
If in the layout.tsx file,

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
          <NotiProvider>
              <Navbar></Navbar>
                {children}
        </NotiProvider>
      </body>
    </html>
  )
}

I have this layout.

If NotiProvider is defined in src/app/context/NotiContext.tsx which is marked with use client.
This means that all pages inherting this layout, and all the components in these pages, will be client-components?
Will i lose the NextJS Server-side rendering aspect for these pages/components?

Answered by B33fb0n3

you can see this pattern here: https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#supported-pattern-passing-server-components-to-client-components-as-props

View full answer

9 Replies

@sudo Hello, NextJS 14 App Router. If in the layout.tsx file, `export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en"> <body className={inter.className}> <NotiProvider> <Navbar></Navbar> {children} </NotiProvider> </body> </html> ) }` I have this layout. If `NotiProvider` is defined in `src/app/context/NotiContext.tsx` which is marked with `use client`. This means that all pages inherting this layout, and all the components in these pages, will be client-components? Will i lose the NextJS Server-side rendering aspect for these pages/components?

B33fb0n3

2024-05-18T16:29:24.923Z

no, you won't. If you pass server components in like this as children, they are still server components

@B33fb0n3 no, you won't. If you pass server components in like this as children, they are still server components

sudoOP

2024-05-18T16:29:53.680Z

Even if they are wrapped in a client-component?

B33fb0n3

2024-05-18T16:31:07.076Z

If you have

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
          <Provider> // clientside
                {children} // server component
        </Provider>
      </body>
    </html>
  )
}