Hvad er hydration

Moderne Angular udfører ikke-destruktiv hydrering: Den gennemgår den eksisterende DOM, matcher den med komponenttræet og genbruger noderne. Intet flimmer, mindre arbejde og bedre ydeevne.

Genbrug af serverens HTML betyder, at det største indhold forbliver vist, hvilket hjælper LCP, og undgår layoutforskydninger fra ny gengivelse, hvilket hjælper CLS. Appen bliver interaktiv uden at blive tegnet igen.

Fase ét: Serveren gengiver HTML og sender den. Fase to: Browseren henter JS, starter Angular og hydrereser den eksisterende markup, så den bliver interaktiv.

Hydrering forudsætter, at komponenttræet på klienten producerer den samme struktur, som serveren producerede. Hvis de afviger, rapporterer Angular en hydreringuoverensstemmelse.

Direkte DOM-manipulation, grene, der kun findes i browseren og ændrer markup, ugyldig HTML-nesting og ikke-deterministisk indhold (for eksempel Math.random() eller Date.now() i skabeloner) skaber uoverensstemmelser.

Du må ikke manipulere DOM'en imperativt (for eksempel med innerHTML uden for Angular) under SSR. Lad Angular eje DOM'en, så klient og server er enige.

Hvis en komponent reelt ikke kan hydreres (for eksempel en widget fra en tredjepart, der ændrer DOM'en), kan du fravælge hydrering med ngSkipHydration; Angular gengiver kun dette undertræ igen.

Hydrering gælder kun, når der findes serverrenderet HTML, som kan genbruges. En ren CSR-app har intet, der kan hydreres; hydrering er klientsiden af SSR-fortællingen.

Hydrering kan være fuld (hele appen hydreres ved indlæsning) eller inkrementel (dele hydreres efter behov). Det er afgørende for ydeevnen at vælge den rigtige strategi, hvilket gennemgås i senere lektioner.

Hydrering genbruger serverens HTML på klienten uden at ødelægge den, hvilket forbedrer LCP og CLS. Uoverensstemmelser opstår på grund af manuelle DOM-ændringer eller ikke-deterministisk markup; brug ngSkipHydration som nødløsning. Hydrering er klientsiden af SSR.