SSR & hydration

Experimental server rendering#

@zidomjs/server can generate synchronous escaped HTML from a server JSX tree. Server JSX uses the server JSX runtime, not the browser DOM runtime.

tsx

● Zidom

import { renderToString } from '@zidomjs/server';import { signal } from '@zidomjs/core';const greeting = signal('Hello & welcome');const html = renderToString(() => <section><h1>{greeting}</h1></section>);// <section><h1>Hello &amp; welcome</h1></section>

The server TypeScript configuration uses jsxImportSource: '@zidomjs/server'. Ordinary HTML text and attribute values are escaped, and the renderer ignores dangerous inline handler strings. Do not mistake this for a general-purpose sanitizer for arbitrary script content.

Opt-in hydration#

Hydration can adopt matching elements and scalar text bindings when server output includes hydration: true markers. Structural getter regions are also partially supported. The client tree must match the server tree and initialize with consistent state.

tsx

● Zidom

// Server-side, using the server JSX runtimeconst html = renderToString(() => <Counter />, { hydration: true });// Browser-side, using the documented compatible hydration setup// import { hydrate } from '@zidomjs/server/hydrate';// const dispose = hydrate(() => <Counter />, document.querySelector('#app')!);

This is a conceptual integration sketch; the server and browser bundles need the matching JSX/runtime configuration from the full upstream hydration guide.

Not production SSR#

No streaming, event replay, keyed structural hydration reconciliation, independent boundaries, complete mismatch recovery, state serialization or production authentication pipeline is included yet. Keep server rendering behind experimental adoption gates.

Run the example#

See the Zidom ssr example and inspect the exact source next to the result.