Líné načítání a hydratace aplikací interagují komplexním a často konfliktním způsobem, především proto, že hydratace vyžaduje dychtivě provádění aplikačního kódu, což podkopává výhody líného zatížení.
Jak hydratace funguje a jeho dopad na líné načítání
Hydratace je proces, pomocí kterého je stránka HTML vykreslovaná serverem „aktivována“ na straně klienta spuštěním JavaScriptu pro připojení posluchačů událostí, obnovením stavu komponent a interaktivní stránky. Tento proces zahrnuje provádění komponent aplikací začínající od kořene a procházení stromem komponent, aby se porozuměly stavem, vazebám a obslužným zařízením událostí.
Protože hydratace musí navštívit každou složku v aktuálním stromu vykreslování, aby se zjistilo, zda musí být interaktivní, nutí všechny tyto komponenty, které mají být dychtivě načteny a provedeny. To znamená, že i když označíte některé komponenty pro líné zatížení, hydratace je stále způsobí, že jsou okamžitě načteny, pokud jsou součástí počátečního vykreslovacího stromu. Hydratace je sekvenční a nemůže přeskočit střední komponenty, aby přímo hydratovaly dětské komponenty, takže všechny rodičovské komponenty musí být nejprve hydratovány [1] [6].
Proč hydratace sabotáží líné načítání
- Dychtivé provedení: Hydratace vyžaduje provádění všech komponent ve stromu Render, což zabraňuje línému načítání odložení načítání kódu pro tyto komponenty.
- Závislost komponent: Komponenty pro děti závisí na rekvizitách z rodičovských komponent, takže rodiče musí být nejprve hydratováni, což nutí řetězec dychtivého zatížení.
- Obsluhy událostí a stav: Hydratace musí také nastavit posluchače událostí a obnovit stav, který vyžaduje předem běžící kód komponenty.
- Vývojářská zátěž: K dosažení líného zatížení během hydratace musí vývojáři ručně spravovat předběžné načítání a rozdělení kódu, což může být složité a náchylné k chybám [6] [7].
Když líné načítání funguje navzdory hydrataci
Líné zatížení může být stále účinné pro komponenty, které nejsou součástí počátečního stromu vykreslování, a proto během hydratace nenavštíví. Příklady zahrnují:
- Dialogy nebo modály, které se otevírají při interakci uživatele
- Komponenty na různých trasách, které nejsou zpočátku vykresleny
V těchto případech mohou být komponenty skutečně líné, protože hydratace nenutí jejich okamžité provedení [6].
Techniky pro optimalizaci hydratace a líného načítání
Některé moderní rámce a knihovny se pokoušejí optimalizovat tuto interakci implementací líné hydratace nebo selektivní hydratace, kde jsou komponenty hydratovány pouze v případě potřeby, například když se stanou viditelnými ve výřezu:
-Knihovny jako `Next-Lazy-Hydratation-on-Scroll` v Next.js umožňují odložení hydratace, dokud se komponenta nepokračuje do zobrazení.
- Pomocí rozhraní API IntersectionObserver mohou být komponenty líné a hydratovány pouze při vstupu do výřezu.
-V VUE/NUXT umožňují zpoždění hydratace, dokud není hlavní vlákno nečinné nebo je viditelná komponenta, techniky a pluginy (např. Nuxt-lazy-hydratát `).
Shrnutí
Hydratace a líné zatížení jsou v zásadě v rozporu, protože hydratace vyžaduje dychtivé provedení komponent ve stromu Render, což zabraňuje línému zatížení provedení odložení kódu. Líné zatížení však zůstává účinné pro komponenty mimo počáteční rozsah hydratace. Cílem rozvíjejících se technik, jako je líná hydratace, tento konflikt odložením hydratace samotným odložením a zlepšením výkonu a uživatelského prostředí.
V podstatě hydratační sabotáty líné zatížení během počátečního zatížení stránky, ale s pečlivým architektonickým výběrem a specializovanými nástroji mohou vývojáři optimalizovat, kdy a jak jsou komponenty hydratovány, aby znovu získaly výhody líného zatížení [1] [6] [7].
Citace:
[1] https://www.infoq.com/presentations/hydratation-loazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydratation-and-loady-are-incompatible
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-in-nextjs-the-future-of-resource-optimalizace
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-ydratation-and-server-components-in-nuxt-vee-js-3-performance/
[6] https://www.builder.io/blog/hydratation-sabotages-lazy-loading
[7] https://www.linkedin.com/posts/misko-hevery-3883B1_Lazy-LOADING-IS-IS-IS-EXERCISE-SAYS-Activity-7115086933935984641-5OXK
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading