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.jsCore creates a style registry around server rendering and writes collected component styles into the document.The
Tavo.jsUI plugin adds project theme variables to the server document as thetavo-ui.theme style record.Hydration scans existing
data-tavo-stylerecords 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.