Slinka iekraušanas un pielietojuma hidratācija mijiedarbojas sarežģītā un bieži pretrunīgā veidā, galvenokārt tāpēc, ka hidratācijai ir nepieciešama lietojumprogrammu koda izpildīšana, kas grauj slinkās iekraušanas priekšrocības.
Kā darbojas hidratācija un tās ietekme uz slinku iekraušanu
Hidratācija ir process, kurā servera atveidota HTML lapa tiek "aktivizēta" klienta pusē, palaižot JavaScript, lai pievienotu notikumu klausītājus, atjaunotu komponentu stāvokli un padarītu lapu interaktīvu. Šis process ietver lietojumprogrammas komponentu izpildi, sākot no saknes un šķērsojot komponentu koku, lai izprastu stāvokli, iesiešanas un notikumu apstrādātājus.
Tā kā hidratācijai ir jāapmeklē katrs pašreizējā renderēšanas koka komponents, lai noteiktu, vai tam jābūt interaktīvam, tas piespiež visus šos komponentus ielādēt un ar nepacietību izpildīt. Tas nozīmē, ka pat tad, ja jūs atzīmējat dažus komponentus slinkai iekraušanai, hidratācija joprojām liks tās nekavējoties ielādēt, ja tās ir daļa no sākotnējā renderēšanas koka. Hidratācija ir secīga un nevar izlaist starpposma komponentus, lai tieši hidratētu bērna komponentus, tāpēc visi vecāku komponenti vispirms ir jāhidratē [1] [6].
Kāpēc hidratācija sabotē slinku iekraušanu
- dedzīga izpilde: hidratācijai ir jāizpilda visas komponentus renderēšanas kokā, kas neļauj slinkai iekraušanai atlikt šo komponentu koda ielādi.
- Komponentu atkarības: Bērnu komponenti ir atkarīgi no vecāku komponentu butaforijām, tāpēc vecākiem vispirms jābūt hidratētiem, piespiežot dedzīgu iekraušanu.
- Notikumu apstrādātāji un stāvoklis: Hidratācijai ir jāiestata arī notikumu klausītāji un jāatjauno stāvoklis, kas prasa komponenta koda darbināšanu iepriekš.
- Izstrādātāju slogs: lai panāktu slinku iekraušanu hidratācijas laikā, izstrādātājiem ir manuāli jāpārvalda priekšplāksne un koda sadalīšana, kas var būt sarežģīta un pakļauta kļūdām [6] [7].
Kad slinkā iekraušana darbojas, neskatoties uz hidratāciju
Slinka iekraušana joprojām var būt efektīva komponentiem, kas nav sākotnējā renderēšanas koka daļa un tādējādi netiek apmeklētas hidratācijas laikā. Piemēri ir:
- Dialogi vai modāli, kas tiek atvērti lietotāja mijiedarbībai
- komponenti dažādos maršrutos, kas sākotnēji netiek veikti
Šajos gadījumos komponentus var patiesi slinkot, jo hidratācija nepiespiež to tūlītēju izpildi [6].
paņēmieni hidratācijas un slinka iekraušanas optimizēšanai
Daži mūsdienu ietvari un bibliotēkas mēģina optimizēt šo mijiedarbību, ieviešot slinku hidratāciju vai selektīvu hidratāciju, kur komponenti tiek hidratēti tikai tad, kad tas ir nepieciešams, piemēram, kad tie kļūst redzami Viewport:
-Bibliotēkas, piemēram, `Nākamā slinka hidratācija, kas atrodas uz skatuves, nākamajā.js ļauj hidratāciju atlikt, kamēr komponents rit.
- Izmantojot ConnSectionobServer API, komponentus var slinkot un hidratēt tikai tad, kad tie ieiet skata portā.
-Vue/Nuxt, slinkie hidratācijas paņēmieni un spraudņi (piemēram, `nuxt-lazy-hydrate`) ļauj hidratāciju aizkavēt, līdz galvenais pavediens ir dīkstāvē vai komponents ir redzams, uzlabojot laiku interaktīvai un pirmajai ieejas kavēšanās metrikai [4] [5].
Kopsavilkums
Hidratācija un slinka iekraušana principā ir pretrunā ar to, ka hidratācijai ir nepieciešama dedzīga komponentu izpilde atveidotajā kokā, kas neļauj slinkai iekraušanai atlikt koda izpildi. Tomēr slinkā slodze joprojām ir efektīva komponentiem, kas nav sākotnējā hidratācijas jomā. Jaunās metodes, piemēram, slinka hidratācijas, mērķis ir saskaņot šo konfliktu, atliekot pati hidratāciju, uzlabojot veiktspēju un lietotāja pieredzi.
Būtībā hidratācijas sabotē slinku slodzi sākotnējās lapas slodzes laikā, bet ar rūpīgu arhitektūras izvēli un specializētiem rīkiem izstrādātāji var optimizēt, kad un kā komponenti tiek hidratēti, lai atgūtu slinkās iekraušanas priekšrocības [1] [6] [7].
Atsauces:
[1] https://www.infoq.com/presentations/hidration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hidratācija un-lazy-loading-are nesaderīgs
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-inxtjs-the-future-of-resource-optimization
[5] https://vieschool.io/articles/Vuejs-tutorials/lazy-hidration-and-server-components-in-nuxt-vue-js-3-performance/
[6.]
[7] https://www.linkedin.com/posts/misko-hevery
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-lading