Server rendering

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

What the server rendersCopy Anchor Link

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 renderCopy Anchor Link

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.

React and Next.jsCopy Anchor Link

The provider starts connections inside useEffect. React does not run effects during a server render.

In Next.js, mark two modules with "use client": the module that calls createSignalRClient, and the component that mounts SignalRProvider. Server components cannot use the hooks, so every component that calls them is also a client component. This sample mounts the provider:

"use client";

import { SignalRProvider } from "./signalr";

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <SignalRProvider baseUrl="/" accessTokenFactory={() => ""}>
      {children}
    </SignalRProvider>
  );
}

For StrictMode in development, see Notes.