Lat belastning og applikasjonshydrering samhandler på en kompleks og ofte motstridende måte, først og fremst fordi hydrering krever å utføre applikasjonskode ivrig, noe som undergraver fordelene ved lat belastning.
hvordan hydrering fungerer og dens innvirkning på lat belastning
Hydrering er prosessen der en server gjengitt HTML-side er "aktivert" på klientsiden ved å kjøre JavaScript for å knytte hendelseslyttere, gjenopprette komponenttilstand og gjøre siden interaktiv. Denne prosessen innebærer å utføre applikasjonskomponentene som starter fra roten og krysser ned komponenttreet for å forstå tilstand, bindinger og hendelsesbehandlere.
Fordi hydrering må besøke hver komponent i det nåværende gjengivelsesreet for å avgjøre om det må være interaktivt, tvinger det alle disse komponentene som skal lastes og utføres ivrig. Dette betyr at selv om du markerer noen komponenter for lat belastning, vil hydrering fremdeles føre til at de blir lastet umiddelbart hvis de er en del av det første gjengivelsesreet. Hydrering er sekvensiell og kan ikke hoppe over mellomliggende komponenter for å direkte hydrere barnekomponenter, så alle overordnet komponenter må hydreres først [1] [6].
hvorfor hydrering sabotages lat lasting
- Ivrig utførelse: Hydrering krever utføring av alle komponenter i gjengivelsesreet, som forhindrer lat lasting fra å utsette lasting av kode for disse komponentene.
- Komponentavhengigheter: Barnekomponenter er avhengige av rekvisitter fra foreldrekomponenter, slik at foreldre først må hydreres og tvinger en kjede med ivrig belastning.
- Hendelsesbehandlere og tilstand: Hydrering må også sette opp lyttere og gjenopprette tilstand, som krever å kjøre komponentkode på forhånd.
- Utviklerbyrde: For å oppnå lat belastning under hydrering, må utviklere manuelt administrere forhåndshentning og kodesplitting, som kan være kompleks og feilutsatt [6] [7].
når lat belastning fungerer til tross for hydrering
Lat belastning kan fremdeles være effektivt for komponenter som ikke er en del av det første gjengivelsesreet og dermed ikke besøkt under hydrering. Eksempler inkluderer:
- Dialoger eller modaler som åpner for brukerinteraksjon
- Komponenter på forskjellige ruter som ikke er gjengitt innledningsvis
I disse tilfellene kan komponentene virkelig lates fordi hydrering ikke tvinger deres umiddelbare henrettelse [6].
teknikker for å optimalisere hydrering og lat belastning
Noen moderne rammer og biblioteker prøver å optimalisere dette samspillet ved å implementere lat hydrering eller selektiv hydrering, der komponenter bare er hydrert når det er nødvendig, for eksempel når de blir synlige i ViewPort:
-Biblioteker som `Next-Lazy-Hydration-on-Scroll` i Next.js lar hydrering utsettes til en komponent ruller i sikte.
- Ved hjelp av IntersctionObServer API kan komponenter lates og hydreres bare når de kommer inn i visningsporten.
-I VUE/NUXT, late hydreringsteknikker og plugins (f.eks. `Nuxt-lat-hydrat`) muliggjør hydrering å bli forsinket til hovedtråden er tomgang eller komponenten er synlig, forbedrer tiden til interaktiv og første inngangsforsinkelsesmetrikk [4] [5].
Sammendrag
Hydrering og lat belastning er grunnleggende i strid fordi hydrering krever ivrig utførelse av komponenter i gjengivelsesreet, som forhindrer lat belastning fra å utsette kodeutførelsen. Lat belastning forblir imidlertid effektivt for komponenter utenfor det innledende hydreringsomfanget. Fremvoksende teknikker som lat hydrering tar sikte på å forene denne konflikten ved å utsette hydrering i seg selv, forbedre ytelsen og brukeropplevelsen.
I hovedsak, hydreringssabotages lat belastning under den første sidelasten, men med nøye arkitektoniske valg og spesialiserte verktøy, kan utviklere optimalisere når og hvordan komponenter hydrerer for å gjenvinne fordelene med lat belastning [1] [6] [7].
Sitasjoner:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-are-inkompatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-resource-optimization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-server-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linkedin.com/posts/misko-hevery-3883b1_lazy-loading-is-like-exercise-alleyone-says-activity-711508693935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading