React Server Components Roadmap for Hydrogen

[jplhomer]

React's version of server components is considered experimental and is still changing.

In order to onboard developers during the developer preview, Hydrogen provides an abstraction around server components (and sometimes, a different implementation based on server components) which we consider to be stable even if React's native implementation is marked as experimental.

Here's a roadmap for migrating from the Hydrogen version of server components to the official version of server components created by React.

Phase 1: Developer Preview (Nov. 8, 2021) [CURRENT]

Today, Hydrogen uses a reverse-engineered version of server components which supports context and SSR in Hydrogen.

Specifically, Hydrogen wraps client components in logic which forks their output based on whether they're being rendered in a SSR or a RSC context.

When responding to a RSC request, the client component wrappers render a <span> containing data attributes about the client component and the passed props. Hydrogen renders the entire tree to HTML and then re-parses it using a third-party library, generating the NDJSON "wire" syntax as the output. This is really inefficient, fragile and cannot be streamed.

Our goal is to remove this code as quickly as we can properly support the official React Server implementation in Hydrogen apps.

In order to do that, we need to do the following work:

• Fix multiple option variants and available filter hydrogen#249
• Fix duplicated names hydrogen#250
• Update pagination types for better inference hydrogen#251
• Analytics hydrogen#255

Phase 2: Stable Release

Once we land all of the above, we will cut a new major release of Hydrogen.

We anticipate upgrading will be very easy for end-users:

1. Convert usage of useQuery() to fetch().json()
2. Convert context to server context where applicable

NOTE: We will continue to consider Hydrogen's use of React Server Components to be stable even if React's native implementation is marked as experimental, alpha or beta. Since Hydrogen provides abstractions around the core implementation, we offer safeguard against the experimental nature of the implementation.