Hva er hydrering

Moderne Angular utfører ikke-destruktiv hydrering: Den går gjennom den eksisterende DOM-en, sammenligner den med komponenttreet og gjenbruker nodene. Ingen blinking, mindre arbeid og bedre ytelse.

Gjenbruk av serverens HTML gjør at det største innholdet forblir synlig, noe som hjelper LCP, og unngår layoutforskyvninger fra ny rendring, noe som hjelper CLS. Appen blir interaktiv uten å tegnes på nytt.

Fase én: Serveren renderer HTML og sender den. Fase to: Nettleseren laster ned JavaScript, starter Angular og hydratiserer den eksisterende markuppen slik at den blir interaktiv.

Hydrering forutsetter at komponenttreet på klienten produserer den samme strukturen som serveren produserte. Hvis de avviker, rapporterer Angular et hydreringsavvik.

Direkte DOM-manipulering, nettleserspesifikke grener som endrer markup, ugyldig HTML-nøsting og ikke-deterministisk innhold (som Math.random() eller Date.now() i maler) fører til avvik.

Ikke manipuler DOM-en imperativt, for eksempel med innerHTML utenfor Angular, under SSR. La Angular ha kontroll over DOM-en, slik at klienten og serveren er enige.

For en komponent som faktisk ikke kan hydratiseres, for eksempel en tredjepartskomponent som endrer DOM-en, kan du velge den bort med ngSkipHydration. Angular renderer da bare dette deltreet på nytt.

Hydrering gjelder bare når det finnes servergenerert HTML som kan gjenbrukes. En ren CSR-app har ingenting å hydrere; hydrering er klientsiden av SSR-historien.

Hydrering kan være fullstendig (hele appen hydreres ved lasting) eller inkrementell (deler hydreres ved behov). Å velge riktig strategi er avgjørende for ytelsen, noe som dekkes i senere leksjoner.

Hydrering gjenbruker serverens HTML på klientsiden uten å ødelegge den, noe som forbedrer LCP og CLS. Uoverensstemmelser oppstår på grunn av manuelle DOM-endringer eller ikke-deterministisk markup; bruk ngSkipHydration som en nødløsning. Hydrering er klientsiden av SSR.