SolidStart "Hydration Mismatch" warning in CI

Solid hydration expects the client's first render to match the server HTML exactly. When it does not, Solid logs a "Hydration Mismatch" and can throw during a strict prerender or test, usually because the render depends on time, randomness, or a browser check.

What this error means

The console or a CI prerender/test shows "Hydration Mismatch" and the UI flickers or errors, tracing to a value that differs between server and client.

solid

Hydration Mismatch. Unable to find DOM nodes for hydration key: 0-1-0
  server rendered: <span>0</span>
  client expected:  <span>1</span>

Common causes

Non-deterministic render output

Date.now(), Math.random(), or locale-dependent formatting differ between the server and the client render.

A branch on a browser-only value during render

Rendering different markup when window exists vs not produces server/client divergence.

How to fix it

Make the first render deterministic

Move time/random values out of the initial render, computing them in onMount.
Do not branch markup on window/isServer during render; render identically then adjust after mount.
Re-run to confirm the mismatch is gone.

src/Clock.tsx

import { onMount, createSignal } from 'solid-js';
const [now, setNow] = createSignal(0); // stable on server + first client render
onMount(() => setNow(Date.now()));

Defer client-only UI with clientOnly

If a subtree can only exist on the client, wrap it so it is not server-rendered at all.

src/routes/index.tsx

import { clientOnly } from '@solidjs/start';
const Live = clientOnly(() => import('./Live'));

How to prevent it

Keep the initial render pure and deterministic.
Set time/random state in onMount, not during render.
Wrap client-only subtrees with clientOnly.