Next.js Discord

Discord Forum

Do Context Providers make everything rendered on client ?

Answered
Crazy ant posted this in #help-forum
Open in Discord
Avatar
Crazy antOP
According to the official docs: https://nextjs.org/docs/getting-started/react-essentials#the-use-client-directive

Once "use client" is defined in a file, all other modules imported into it, including child components, are considered part of the client bundle.


For the code below (from the docs), does it mean whole page (everything that is considered as a "children") will be rendered on the client ? Basically, nothing from that page will be render on the server ?

app/theme-provider.js
'use client'
 
import { createContext } from 'react'
 
export const ThemeContext = createContext({})
 
export default function ThemeProvider({ children }) {
  return <ThemeContext.Provider value="dark">{children}</ThemeContext.Provider>
}


app/layout.js
import ThemeProvider from './theme-provider'
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}
Answered by joulev
No.
* All components are rendered in the server including client components. Client components are hydrated on the client to become interactive
* Server components can be passed as props to client component, so in your example the app will be passed to the provider as the children prop - that’s allowed. Hence pages are still rendered as server components
View full answer

5 Replies

Avatar
joulev
No.
* All components are rendered in the server including client components. Client components are hydrated on the client to become interactive
* Server components can be passed as props to client component, so in your example the app will be passed to the provider as the children prop - that’s allowed. Hence pages are still rendered as server components
Answer
Avatar
Crazy antOP
@joulev That was helpful but know I have another questions:

https://nextjs.org/docs/getting-started/react-essentials#composing-client-and-server-components

Here is written following:

On the server, React renders all Server Components before sending the result to the client.
This includes Server Components nested inside Client Components.


What exactly they think of when they say "nested inside".
If I have following

<SomeContenxtProvider>
    <ServerComponent />
<SomeContenxtProvider>


Is ServerComponent in this example nested inside ?
What about this:

'use client'

export default function clientComponent(){
   return (
      <>
        <ClientCompo />
        <ServerCompo />
      </>
    ) 
}


In this case, will ServerCompo be rendered on the client or on the server ? Can we think og ServerCompo as "nested inside" since it is not passed as a prop?
Avatar
joulev
First code snippet works, second doesn’t. Basically a component will be a client component if:
* use client
* or it is imported to a client component
Avatar
Crazy antOP
Thanks again. Can you provide me with some materials to learn more about hydratation in Next 13 ?
Avatar
joulev
I don’t know any, sorry. I think the best way to learn it is to play with it. Make playground app and learn as you implement the app