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.

Vue and NuxtCopy Anchor Link

Package imports do not access browser globals. During a server render, the plugin provides an inert context, so composables work and report "idle".

The browser starts the session after app.mount(). This keeps the first client render equal to the server HTML.

In Nuxt, use one universal plugin. Do not add the .client suffix, because server-rendered composables also need the provided context. This plugin installs the session:

import { signalR } from "~/signalr";

export default defineNuxtPlugin((nuxtApp) => {
  const token = useCookie("token");

  nuxtApp.vueApp.use(signalR, {
    baseUrl: useRuntimeConfig().public.apiUrl,
    enabled: () => import.meta.client && Boolean(token.value),
    accessTokenFactory: () => token.value ?? "",
  });
});

A component that hydrates later, for example an async component under Suspense or one from defineAsyncComponent, also shows "idle" until it mounts.

Do not use a top-level await in <script setup> for a hub call.