În aplicațiile cu randare pe server (Server-Side Rendering – SSR), serverul trimite către browser un fișier HTML complet gata pictat. Funcția hydrateRoot preia acest arbore DOM existent și atașează sincron ascultătorii de evenimente JavaScript (click, input, submit) și inițializează starea React, fără a re-crea nodurile din memorie de la zero.
Hidratarea pe client a unei pagini SSR
import { hydrateRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
// Hidratarea nodurilor existente din HTML:
hydrateRoot(container, <App />, {
onRecoverableError(eroare) {
console.warn('Avertisment de hidratare recuperabil:', eroare);
}
});
Prevenirea discrepanțelor de hidratare (Hydration Mismatch): HTML-ul generat inițial pe server trebuie să corespundă caracter cu caracter cu prima randare pe client. Diferențele cauzate de
new Date(), localStorage sau window.innerWidth trebuie amânate într-un useEffect sau marcate cu suppressHydrationWarning.
Întrebări & Exemple de Cod:
Funcția hydrateRoot în ReactDOM Client: Hidratarea Conținutului Server-Side (SSR)Ai o nelămurire despre utilizarea comenzii
Funcția hydrateRoot în ReactDOM Client: Hidratarea Conținutului Server-Side (SSR)sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.