Server/Packages/Server Renderer
@sigx/server-renderer · Stable

Server Renderer#

@sigx/server-renderer renders your SignalX component tree to HTML on the server — as a string or a stream — then re-attaches reactivity in the browser by hydrating the existing DOM instead of re-creating it.

v0.5.0 ESM-only MIT

It is the base SSR package: the renderer and hydrator are deliberately strategy-agnostic — they know nothing about islands, selective hydration, or resumability. Those strategies layer on top through a small plugin SPI, so you only ship what you use. For client:* selective hydration, add @sigx/ssr-islands on top.

What you get#

  • Render APIs — renderToString, renderToStream (web ReadableStream), renderToNodeStream (Node Readable), and a callback-based variant for fine control.
  • Streaming with async data — components fetch on the server via ssr.load(), and async subtrees stream in as placeholders that get swapped client-side.
  • Hydration — defineApp(<App/>).use(ssrClientPlugin).hydrate('#root') re-attaches handlers and effects to server-rendered DOM.
  • Head management — useHead() collects title/meta/link/script from inside components and the renderer appends them to the document head.
  • A plugin SPI — createSSR().use(plugin) plus registerClientPlugin() — the extension points islands, resumable, and Suspense strategies build on.

The three subpaths#

The package splits into three tree-shakeable entry points (all sideEffects: false) so a browser bundle never pulls in Node code:

Import pathUse it for
@sigx/server-rendereruseHead, createSSR, ssrClientPlugin, shared types
@sigx/server-renderer/serverrenderToString, renderToStream, renderToNodeStream — Node render APIs
@sigx/server-renderer/clienthydrate, ssrClientPlugin, hydration internals

A minimal end-to-end example#

1. A shared component#

TSX 
// src/App.tsx
import { component } from 'sigx';

export const App = component(({ signal }) => {
    const count = signal(0, 'count');
    return () => (
        <div class="app">
            <h1>Hello from SignalX SSR</h1>
            <button onClick={() => count(count() + 1)}>
                Count: {count()}
            </button>
        </div>
    );
});

2. Render on the server#

TSX 
// src/entry-server.tsx
import { renderToString } from '@sigx/server-renderer/server';
import { App } from './App';

export async function render() {
    const appHtml = await renderToString(<App />);
    return `<!DOCTYPE html>
<html>
  <head><meta charset="utf-8" /></head>
  <body>
    <div id="root">${appHtml}</div>
    <script type="module" src="/src/entry-client.tsx"></script>
  </body>
</html>`;
}

3. Hydrate on the client#

TSX 
// src/entry-client.tsx
import { defineApp } from 'sigx';
import { ssrClientPlugin } from '@sigx/server-renderer/client';
import { App } from './App';

defineApp(<App />)
    .use(ssrClientPlugin)
    .hydrate('#root');

hydrate() walks the existing server DOM and attaches the click handler and reactive effects — no DOM is re-created. If the container has no SSR content, hydrate() falls back to a fresh client render.

Next steps#