React + Lexical with RSC, DecoratorNodes, and server-client boundaries (Next.js application)

[callajd]

Our Setup

Our application uses React + Lexical + RichText in two distinct modes:

• Editor: this mode enables full editor functionality to create and modify content. This mode is supported only on the client; the server renders a "dumb" HTML placeholder until the client can light up the full editor functionality.
• Viewer: this mode simply uses Lexical to render content, with no support for user content modification. In this mode, we'd like to initially render on the server, while Next.js / React manages the progressive addition of React interactivity (eg, "onClick") on the client.

For Viewer mode, we are naturally exploring use of the @lexical/headless package.

We also implement a number of custom DecoratorNodes. The decorate methods of the DecoratorNodes return Suspense-enabled React Server Components that render fallbacks while waiting for promises to fulfill. These RSCs use composition with Client Components to enable interactivity. Some of them use components from third party libraries we don't control.

Because Next.js supports recent React features to manage the server-client boundary and client side hydration, we cannot (simply) render to some string in the server environment. We need to defer to the Next.js rendering strategy here. Our use of third party components in DecoratorNodes also means we don't have full control of DOM representations.

Our Problem

We haven't been able to figure out how to use a Headless Lexical editor that will defer to the Next.js / React management of the server-client boundary. My impression, which might be incorrect, is that Lexical gives us two sort of rigid choices that don't really permit the more nuanced strategy offered by RSCs: render everything on the server (typically to some string), or render everything on the client.

Intuitively what I'm looking for is something akin to createDOM that instead keeps everything in React, createReact or whatever. Then on the server Lexical would transform the node tree from JSON to React, which Next.js / React would render using its RSC strategy. (This idea may not be practical; it's an illustration of my mental model rather than a suggestion or proposal.)

Are there recommended patterns or examples that can help us understand how, on the server, to combine Next.js / React RSC rendering of components with Lexical?

[etrepum]

Lexical does not currently have any facilities to make it easy to use RSC, you'd have to build it and contribute it or wait for someone else to get around to it.

[callajd]

Thanks, just knowing that is useful.

The scope and complexity of a feature like this probably justifies starting with a proposal / RFC rather than a PR. I'll take a look at the contribution guidelines.