SSR Client APIs

isServer, isBrowser, setSSRMode, isDev, getContext, async done counter, collectSSRStyles.

import {
  isServer, isBrowser, setSSRMode, isDev,
  getContext, useCtx, done, getSsrAsyncCounter,
  collectSSRStyles,
} from 'mates';

// Process flags (Symbol.for on globalThis — not a string isSSR)
isServer();              // true after mates start (Node)
isBrowser();             // true in the client JS realm

// Standalone / test renders (ALS makes setSSRMode a no-op when active)
setSSRMode(true);

if (!isServer()) {
  window.addEventListener('resize', handler);
}

const ctx = getContext(); // Hono-style Ctx during SSR/RPC — undefined in browser
// useCtx is a deprecated alias of getContext

isDev();                 // NODE_ENV / import.meta.env check
done();                  // early SSR async completion signal
getSsrAsyncCounter();    // in-flight asyncAction/Fetch count during SSR

collectSSRStyles();      // CSS-in-JS registry (may return "")

Overview

These APIs ship in core mates so the same components run on the server and in the browser. Use them to gate DOM APIs, read the request context during SSR, and coordinate async completion.

Hydration flags and the boot script live on Hydration. Store snapshot transfer is documented under globalStore and pageStore.

Flags

API	When true	Notes
`isServer()`	Node start process	Symbol.for('mates.server')
`isBrowser()`	Client JS realm	Symbol.for('mates.browser')
`isDev()`	Non-production env	Independent of SSR

Flag readout (browser)

In the SPA playground every SSR flag is false; isDev follows the build.

import { html, renderApp, isServer, isBrowser, isDev, isHydrating } from 'mates';

const App = () => () => html`

<span class="overline">Client flags (SPA playground)</span>

<div class="mono">isServer() = ${String(isServer())}</div>

<div class="mono">isBrowser() = ${String(isBrowser())}</div>

<div class="mono">isDev() = ${String(isDev())}</div>

<div class="mono">isHydrating() = ${String(isHydrating())}</div>

</div>

<p class="muted m-t-5">Document-pass isSSR() lives on mates-fullstack, not mates.</p>

</div>

renderApp(App, document.getElementById('app'));

getContext() on the client

Returns undefined outside a server request.

import { html, renderApp, getContext } from 'mates';

const App = () => {

const ctx = getContext(); // undefined in the browser playground

return () => html`

getContext() → ${ctx ? ctx.req.path : 'undefined (client)'}

</p>

<p class="muted m-t-5">During SSR/RPC, ctx.req / cookie / auth are populated.</p>

</div>

};

renderApp(App, document.getElementById('app'));

API — SSR Client APIs

import { isServer, isBrowser, setSSRMode, isDev, getContext, useCtx, done, getSsrAsyncCounter, incrementSsrAsyncCounter, decrementSsrAsyncCounter, setSSRApiLookup, setSSRRequest, collectSSRStyles } from 'mates'

Prop / Option	Type	Default	Description
`isServer()`	`boolean`	—	True in the Node `mates start` process (`globalThis[Symbol.for('mates.server')]`).
`isBrowser()`	`boolean`	—	True in the client JS realm (`globalThis[Symbol.for('mates.browser')]`).
`setSSRMode(value)`	`void`	—	Enable legacy/standalone SSR mode. No-op when mates-ssr ALS accessor is active.
`isDev()`	`boolean`	—	True unless NODE_ENV / import.meta.env is production.
`getContext() / useCtx()`	`Ctx \| undefined`	—	Hono-style server Context during SSR/RPC. undefined on the client. useCtx is deprecated alias.
`done()`	`void`	—	Signal early SSR completion for custom async outside asyncAction/Fetch.
`getSsrAsyncCounter()`	`number`	—	In-flight async work count for the active SSR render.
`setSSRApiLookup / setSSRRequest`	`void`	—	Legacy Fetch SSR shortcut wiring. No-op under ALS; framework sets per-request values.
`collectSSRStyles()`	`string`	—	Gather CSS-in-JS text for head injection (core may return empty string).