Mitä hydraatio on
Ymmärtäkää, miten hydraatio hyödyntää palvelimen HTML:ää uudelleen
Mitä hydraatio on on ilmainen Angular Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu Angular Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Hydraation määritelmä
Hydraatio on prosessi, jossa asiakaspuolen Angular-sovellus käyttää palvelimella renderöityä HTML:ää uudelleen ja liittää olemassa olevaan DOM:iin tapahtumankuuntelijat ja tilan sen sijaan, että poistaisi sen ja renderöisi kaiken uudelleen.
Elämä ilman hydraatiota
Vanha SSR käytti tuhoavaa hydraatiota: asiakas tyhjensi palvelimen DOM:n ja renderöi kaiken alusta. Tämä aiheutti näkyvän välähdyksen ja hävitti palvelimen tekemän työn.
Tuhoamaton hydraatio
Moderni Angular suorittaa tuhoamattoman hydraation: se käy olemassa olevan DOM:n läpi, sovittaa sen komponenttipuuhun ja käyttää solmuja uudelleen. Välähdystä ei synny, työmäärä pienenee ja suorituskyky paranee.
Miksi se parantaa mittaustuloksia
Palvelimen HTML:n käyttäminen uudelleen pitää suurimman sisällön renderöitynä, mikä auttaa LCP-tulosta, ja estää uudelleenrenderöinnin aiheuttamia asettelun muutoksia, mikä auttaa CLS-tulosta. Sovelluksesta tulee vuorovaikutteinen ilman uudelleenpiirtämistä.
Kaksivaiheinen kokonaiskuva
Ensimmäinen vaihe: palvelin renderöi HTML:n ja lähettää sen. Toinen vaihe: selain lataa JavaScriptin, käynnistää Angularin ja hydraatoi olemassa olevan rakenteen, jotta siitä tulee vuorovaikutteinen.
DOM-rakenteen täsmääminen
Hydraatio olettaa, että asiakaspuolen komponenttipuu tuottaa saman rakenteen kuin palvelin. Jos rakenteet poikkeavat toisistaan, Angular ilmoittaa hydraation yhteensopimattomuudesta.
// NG0500: During hydration Angular expected <div> but found <span>Yleiset yhteensopimattomuuden syyt
Suora DOM:n muokkaus, selainkohtaiset rakenteen muuttavat haarat, virheellinen HTML-sisäkkäisyys ja epädeterministinen sisältö (kuten Math.random() tai Date.now() malleissa) aiheuttavat yhteensopimattomuuksia.
Manuaalisten DOM-muutosten välttäminen
Älä käsittele DOM:ia imperatiivisesti (esimerkiksi innerHTML-ominaisuudella Angularin ulkopuolella) SSR:n aikana. Anna Angularin hallita DOM:ia, jotta asiakas ja palvelin pysyvät yhtenevinä.
ngSkipHydration-poistumistie
Jos komponenttia ei aidosti voida hydraatoida (esimerkiksi DOM:ia muuttavan kolmannen osapuolen vimpaimen vuoksi), poista se hydraation piiristä ngSkipHydration-toiminnolla. Tällöin Angular renderöi uudelleen vain kyseisen alipuuryhmän.
<app-legacy-widget ngSkipHydration></app-legacy-widget>Hydratointi edellyttää SSR:ää
Hydratointia käytetään vain silloin, kun hyödynnettävissä on palvelimella renderöityä HTML:ää. Puhtaassa CSR-sovelluksessa ei ole mitään hydroitavaa; hydratointi on SSR:n asiakaspuoli.
Mitä seuraavaksi
Hydratointi voi olla täydellistä (koko sovellus hydroidaan latauksen yhteydessä) tai inkrementaalista (osat hydroidaan tarpeen mukaan). Oikean strategian valinta on suorituskyvyn kannalta tärkeää, ja sitä käsitellään myöhemmissä oppitunneissa.
Pikatarkistus
Tarkistakaa, miten hyvin ymmärrätte hydratoinnin.
Kertaus
Hydratointi hyödyntää palvelimen HTML:ää asiakaspuolella tuhoamatta sitä, mikä parantaa LCP- ja CLS-arvoja. Yhteensopimattomuuksia syntyy manuaalisista DOM-muutoksista tai epädeterministisestä merkintäkielestä; käyttäkää ngSkipHydration-asetusta poikkeustapauksissa. Hydratointi on SSR:n asiakaspuoli.
Opi HTML tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 38
- Oppitunnit
- 144
Usein kysytyt kysymykset
Onko oppitunti ”Mitä hydraatio on” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Angular Academy-oppimispolun 3 oppituntia, myös oppitunnin “Mitä hydraatio on”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Angular Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Mitä hydraatio on”?
Ymmärtäkää, miten hydraatio hyödyntää palvelimen HTML:ää uudelleen Harjoittelet Angular Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni Angular Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin Angular Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/4.
Kuinka kauan ”Mitä hydraatio on”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä Angular Academy-oppitunnilla?
Kyllä. Jokainen Angular Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- Mitä hydraatio on
- Täyden hydraation käyttöönotto
- Inkrementaalinen hydraatio @deferillä
- Core Web Vitals -mittareiden mittaaminen