Skip to content

SSR Safety

Browser Lifecycle is a browser-only runtime. Keep initialization on the client.

ts
import { isBrowser } from "@jayoncode/browser-lifecycle";

let lifecycle: ReturnType<typeof createBrowserLifecycle> | undefined;

export function getLifecycle() {
  if (!isBrowser()) {
    return undefined;
  }

  lifecycle ??= createBrowserLifecycle({ autoStart: true });
  return lifecycle;
}

Framework notes

FrameworkGuidance
ReactInitialize in useEffect or a client-only provider
Next.jsUse a client component boundary ("use client")
VueInitialize in onMounted
AngularInitialize in ngOnInit after platform check
SvelteInitialize in onMount

See Framework Examples for reference implementations.

What not to do

  • Do not import Browser Lifecycle in server-only modules that run during SSR
  • Do not read window or document before checking isBrowser()
  • Do not assume connectivity or visibility state exists on the server

JOC is a JayOnCode monorepo of @jayoncode/* packages. Docs sync from source via TypeDoc and sync scripts.