SSR ClientOnly

This guide explains when to use ClientOnly in Zova SSR within the Cabloy monorepo.

When to use ClientOnly

Some components only make sense on the client side.

When that happens, wrap them in ClientOnly so SSR does not try to render behavior that depends on the browser-only environment.

Representative pattern

import { ClientOnly } from 'zova';

@Render()
export class RenderTabs {
  render() {
    return (
      <ClientOnly>
        <div role="tablist" class="tabs tabs-lifted">
          {domTabs}
        </div>
      </ClientOnly>
    );
  }
}

Why this matters

This is one of the simplest but most important SSR boundary tools.

It makes the server/client split explicit and keeps browser-only behavior from leaking into the server render path.

Implementation checks for client-only SSR boundaries

When adding or editing SSR-sensitive UI, ask whether the component depends on client-only behavior such as browser APIs, client-only rendering expectations, or interactions that should not appear in the server render.

If yes, ClientOnly may be the right boundary.