Navigated to /docs/ui/ssr-and-hydration

SSR and hydration

Understand automatic component style collection, project theme output, hydration deduplication, and runtime mode timing.

The normal SSR style flow is automatic

  • Tavo.js Core creates a style registry around server rendering and writes collected component styles into the document.

  • The Tavo.js UI plugin adds project theme variables to the server document as the tavo-ui.theme style record.

  • Hydration scans existing data-tavo-style records once and reuses them by id instead of appending duplicates.

  • Mounted components retain dynamic sx styles; cleanup removes an evicted style only after its final consumer releases it.

Plan the first theme frame

Generated CSS can render light, dark, or system mode on the server. A saved browser preference is available only when the theme controller reads local storage. Mounting the controller after the first paint can therefore switch from the generated default to the saved explicit mode.

  • Choose system when matching the device on the first frame is more important than restoring an explicit saved choice before hydration.

  • Choose a fixed default when the product requires deterministic server output.

  • The package does not currently expose a pre-hydration persistence bootstrap helper.

  • Theme runtime methods are server-safe: unavailable window, document, matchMedia, or storage APIs fall back or do nothing.