Ensures zero-mismatch integrity between server-rendered HTML and client-side React trees. Covers hydration error diagnosis, selective hydration via Suspense boundaries, deterministic data bridges with the React 19 use() hook, 'use cache' for eliminating data drift, two-pass rendering for client-only content, React 19's single-diff hydration error reporting for pinpointing exact mismatches, and automated validation...
When to use: Debugging hydration mismatch errors, fixing text content mismatches, handling browser extension DOM pollution, implementing deterministic data bridges, optimizing SSR/client hydration performance, setting up error monitoring with onRecoverableError.
When NOT to use: Client-only React applications without SSR, static sites without hydration, API-only backends.
Garantisce l'integrità senza discrepanze tra l'HTML renderizzato dal server e gli alberi React lato client. Da utilizzare durante il debug di errori di idratazione, la correzione di mancate corrispondenze del contenuto di testo, la gestione dell'inquinamento DOM dell'estensione del browser, l'implementazione dell'idratazione selettiva con Suspense, l'utilizzo dell'hook use() di React 19 per ponti dati deterministici da server a client o l'applicazione della cache di utilizzo di Next.js per la prevenzione della deriva dei dati. Utilizzare per mancata corrispondenza dell'idratazione, SSR, hydrateRoot,pressHydrationWarning, onRecoverableError, rendering a due passaggi. Fonte: oakoss/agent-skills.