javascript - How to provide context to React Server Components (Next.js 13.2) ? (e.g. theme)

I’ve been playing with React Server Components for nearly 2 weeks now and this question has been making my brain hurt: how do you provide context to server ponents? Like for example, providing a theme (e.g dark | light mode) ? Ive checked the Nextjs docs so many times and ive read the same thing like as if it would change. It states that only the client ponents can useContext. So how would server ponents useContext if it needs data thats not server based? I can’t fetch data thats state based. Has anyone figured a way around this?

    <html>
      <body className="page-container">
        <ThemeProvider>
          {children} // Combination of Server and Client ponents
        </ThemeProvider>
      </body>
    </html>

export default async function ServerComponent(){
 ...
 const theme = useContext(ThemeContext) // Would give an error; not a client ponent
 ...
 return (
  <div className={theme}>
   ...
  </div>
)
}

I've done everything that was said in the Next.js beta docs: place the provider in a client ponent and let the server ponents be the children of said client ponent. Now, I'm just wondering how to consume the context in server ponents; it works in client ponents as they're allowed to use hooks, but not for server ponents.

    <html>
      <body className="page-container">
        <ThemeProvider>
          {children} // Combination of Server and Client ponents
        </ThemeProvider>
      </body>
    </html>

export default async function ServerComponent(){
 ...
 const theme = useContext(ThemeContext) // Would give an error; not a client ponent
 ...
 return (
  <div className={theme}>
   ...
  </div>
)
}

Share Improve this question asked Mar 17, 2023 at 19:23 Jack Oats 1511 silver badge5 bronze badges

3 See this answer for more information on "server context" vs "client context". React Server Components do not municate with each other via a normal React context, but by using a request-scoped cache via the "cache" function. – Eric Burel Commented Mar 22, 2023 at 10:49
2 Does this answer your question? Retrieve data server side and save in context with Next.js – Eric Burel Commented Mar 22, 2023 at 10:51

Add a ment |

2 Answers 2

Sorted by: Reset to default 1

Recently added an experimental implementation of server contexts to the next-impl-getters package. The implementation API mirrors client contexts, so there should be no difficulties in using them.

The alternative is to use the unstable_cache function.

// ./ExampleContext.ts
import createServerContext from "next-impl-getters/create-server-context"

export const ExampleContext = createServerContext<{ data: string }>()

// ./ParentComponent.ts
import { ExampleContext } from "./ExampleContext"
import ChildComponent from "./ChildComponent"

export default function ParentComponent() {
    return (
        <ExampleContext.Provider value={{ data: 'test' }}>
            <ChildComponent />
        </ExampleContext.Provider>
    )
}

// ./ChildComponent.ts
import getServerContext from "next-impl-getters/get-server-context"
import { ExampleContext } from "./ExampleContext"

export default function ChildComponent() {
    const context = getServerContext(ExampleContext)

    return (
        <div>
            {context?.data}
        </div>
    )
}

Context running on client side only, that means you can not use it from server ponent. You can try to create the client ponent and import to your the server ponent by using 'use client'; at first line in your client ponent.

See for more information: https://beta.nextjs/docs/rendering/server-and-client-ponents#client-ponents

Hope it helps for you.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to provide context to React Server Components (Next.js 13.2) ? (e.g. theme) - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)