Skip to content

CONCEPT Cited by 1 source

React Hydration

Hydration is the process by which a frontend React runtime takes over server-rendered HTML: it walks the existing DOM, verifies the markup matches what it would render locally, and attaches event handlers / effects to make the page interactive — without recreating the DOM nodes. It replaced earlier SSR approaches that threw the server HTML away and re-rendered client-side, which was slower and caused visible jank.

Invariants

  • Markup identity: server and client must produce the same HTML for the initial state. Divergence forces a full re-render (client-side rendering fallback), regressing both TTVC and TTI and showing up as low hydration success rate in metrics.
  • State availability at hydration time: whatever state drove server rendering must be present in the page before the client hydrates that subtree.

Interaction with streaming SSR

Under concepts/streaming-ssr, hydration happens per <Suspense> boundary as each boundary's chunk arrives. The state driving that boundary's render must be injected before the boundary's markup, not after — or hydration mismatches and the subtree re-renders on the client. Confluence's pipeline uses a NodeJS transform in objectMode that buffers emitted state while React is mid-chunk, then flushes data before markup on setImmediate (Source: sources/2026-04-16-atlassian-streaming-ssr-confluence).

Known pitfall: context change across a ready Suspense boundary

(React 18)

If a React Context value changes during hydration, React 18 discards and re-renders the component subtree — and under streaming SSR, it does this once per Suspense boundary as each becomes ready. TTI regresses proportionally to boundary count. Worked around with unstable_scheduleHydration (raise hydration priority to keep context stable); confirmed fixed in React 19. (Source: sources/2026-04-16-atlassian-streaming-ssr-confluence)

A leaky state-management library compounded this because discarded renders didn't clean up event listeners — permanent CPU growth. General lesson: rollouts measured only on topline metrics miss secondary-guardrail regressions; track CPU, hydration success rate, and per-boundary render counts.

Seen in

Last updated · 200 distilled / 1,178 read