@svebcomponents/ssr-react

@svebcomponents/ssr-react renders registered custom elements with declarative shadow DOM in React 19 apps. The package is in beta.

Setup

pnpm add @svebcomponents/ssr @svebcomponents/ssr-react svelte

Route dashed JSX tags through the package runtime:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@svebcomponents/ssr-react",
  },
}

Load your component package’s browser entry in client code and its renderer entry on the server. Then write the element as JSX:

<my-component title="Hello" count={5} />

See the React setup guide for import placement in a server-rendered app, or the Next.js guide for the App Router.

Wrapper component

Use CustomElement for explicit wrapping:

import { CustomElement } from "@svebcomponents/ssr-react";

<CustomElement tag="my-component" title="Hello" count={5} />;

The server wrapper calls the registered Lit Labs ElementRenderer and places the resulting template before the light-DOM children. On the client, React renders the host tag; the browser has already parsed the shadow template. The generated extension asks Svelte to hydrate it when the element upgrades.

The registry accepts renderers from other libraries when they implement the same ElementRenderer contract.

Async components

The default wrapper uses a synchronous render path. If a component awaits during rendering, the wrapper emits the host element without shadow content and logs one warning for its tag. The browser then renders that element.

React Server Components can await the renderer:

import { CustomElement } from "@svebcomponents/ssr-react/rsc";

export default async function Page() {
  return <CustomElement tag="my-component" title="Hello" />;
}

Plain dashed tags in a Server Component already support async rendering. Import /rsc only to use the wrapper explicitly. Client Components and plain React SSR use the synchronous wrapper. Enable compilerOptions.experimental.async in the component package when the Svelte component itself awaits during rendering.

Exports

Export	Use
@svebcomponents/ssr-react	Synchronous CustomElement wrapper
@svebcomponents/ssr-react/jsx-runtime	Production JSX runtime
@svebcomponents/ssr-react/jsx-dev-runtime	Development JSX runtime
@svebcomponents/ssr-react/rsc	Async wrapper for React Server Components

Limits

• Use React 19 and install Svelte in the server app.
• The JSX runtimes route valid dashed tag names and exclude reserved SVG and MathML names.
• The default wrapper renders async elements in the browser.
• To use SsrPrepare data after a Next.js client transition, pass the data from the Server Component as a serializable prop.
• The /rsc wrapper cannot run inside a Client Component.
• App code must load the component’s browser entry and server renderer.

Read Async components and server data for the host support matrix.