Skip to content
Discussion options

You must be logged in to vote

A context provider can wrap both server and client components. The catch is that server components can't access the context, the usual way, but client components can.

This is what the people call interleaving, or composition pattern. For example:

import ThemeProvider from './theme-provider'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}

For example here, ThemeProvider is a client component, and that doesn't make children client components. children, which would be a page in this case, can still be a Server Component, which at some p…

Replies: 1 comment 6 replies

Comment options

You must be logged in to vote
6 replies
@Nader-CS
Comment options

@icyJoseph
Comment options

@Nader-CS
Comment options

@icyJoseph
Comment options

Answer selected by Nader-CS
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Help
Labels
None yet
2 participants