use-signalr
Guides

Server rendering

How Solid behaves during server-side rendering and hydration.

Nothing connects on the server. Importing the package, calling createSignalRClient, and rendering a component start no connection.

What the server renders

Every hub reports the status "idle" during a server render.

The browser also reports "idle" on its first render. Because both sides match, hydration works and no mismatch warning appears.

The connection starts in the browser, after the first render. Then the status changes to "connecting" and "connected".

Calls during a server render

An invoke during a server render waits for a connection that never comes. It ends with a SignalRTimeoutError when its timeout expires (10 seconds by default).

Call useSignalRInvoke in setup or component init, as with any helper. Do not call the function that it returns during a server render. Call that function in the browser, for example in an event handler. Use useHubStatus to show an "offline" or loading state until the hub is connected.

Solid and SolidStart

The provider starts connections inside createEffect. Solid does not run this effect during SSR, so every hub reports "idle" until the browser runs the effect.

In SolidStart, mount SignalRProvider in your root component. The import is safe on the server. Mount the provider above every <Suspense>: in SolidStart, wrap <Router> in app.tsx.

Do not call useSignalRInvoke in a createResource or createAsync fetcher. Gate the call on useHubStatus(hub)() === "connected".

On this page