Approach for React Server Components

[joshblack]

Support for React Server Components is being introduced in various meta frameworks for React.js, namely through Next.js. Server Components are a new concept in React and we would like to make sure that teams can leverage @primer/react alongside Server Components seamlessly.

The core challenge presented when using @primer/react along with Next.js is that, by default, components are treated as Server Components. Server Components themselves have certain constraints, including:

• May not use state
• May not use rendering lifecycle (effects)
• May not share things between server and client (like context)

For a full list, checkout this section in the RFC

When teams are using @primer/react, one of the first challenges that they run into is that compponents are treated as server components and, as a result, cause Next.js to error.

Error: createContext only works in Client Components. Add the "use client" directive at the top of the file to use it.

To address this, on our side we should use the "use client" directive in files or boundaries where components are client components. In our first phase, we could add this directive to each entrypoint in our package to mark the entrypoint as "client only"

In the future, we can investigate what may be a good opportunity for a server component and can then investigate having bundles for client vs server. This will likely need to be after switching off from a ThemeProvider as context values cannot propagate between client and server 😞

An exploration into this approach is available here: #4128

---

To learn more about React Server Components, checkout the following resources:

• Server Components RFC
• Making Sense of React Server Components
  
• React Server Components from Scratch

[siddharthkp]

In our first phase, we could add this directive to each entrypoint in our package to mark the entrypoint as "client only"
In the future, we can investigate what may be a good opportunity for a server component and can then investigate having bundles for client vs server.

I really like this strategy!

This will likely need to be after switching off from a ThemeProvider as context values cannot propagate between client and server 😞

Ouch! Does that mean we're stuck with it until we migrate off styled-components? (which isn't on the roadmap yet)

[joshblack]

Does that mean we're stuck with it until we migrate off styled-components? (which isn't on the roadmap yet)

@siddharthkp realistically, I think so 😞 Or at least I'm not sure of a way we would "mix-and-match" client and server components so that context values would work as we expect. I feel like the major limitation that we run into is that client components cannot call server components so we are unable to provide a theme as a prop or value to a server component when rendering.