Client Context can be shared as usual and is accessible by components further down the component tree.
server
node.js
Context Provider
client
node.js
server
node.js
Async Data
server
node.js
Austin Smith's avatar

Austin Smith

Chief Optimization Administrator

Jonathon Nitzsche's avatar

Jonathon Nitzsche

Product Branding Coordinator

Marvel at how I import these client components
client
node.js
client
node.js
Because I'm rendered on the server, I am completely unaware of any client context. However, React is clever enough to share context with my imported client components, because they share the same provider further up in the component tree.
It's magic!

A common use case is a top level theme provider client component that wraps the entire app. Because the app is being passed "through" from the root server component, children are not within a client boundary, but subsequently imported client components can access the theme context.

layout.tsx
import ThemeProvider from './theme-provider'
 
export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>{children}</ThemeProvider>
      </body>
    </html>
  )
}
themeProvider.tsx
'use client'; // opt-out of RSC
 
import { createContext } from 'react'
 
export const ThemeContext = createContext({})
 
export default function ThemeProvider({ children }) {
  return (
    <ThemeContext.Provider value="dark">
      {children}
    </ThemeContext.Provider>
  );
}

This may change and patterns are still emerging about how to share context between server and client. For example, how do we render the user's preferred theme during the initial page request?

Next, let's say yes to streaming data with React Server Components!
InterweavingFetching