Le chargement paresseux et l'hydratation des applications interagissent de manière complexe et souvent contradictoire, principalement parce que l'hydratation nécessite l'exécution du code d'application avec impatience, ce qui sape les avantages du chargement paresseux.
Comment fonctionne l'hydratation et son impact sur le chargement paresseux
L'hydratation est le processus par lequel une page HTML rendue en serveur est "activée" du côté client en exécutant JavaScript pour attacher des écouteurs d'événements, restaurer l'état des composants et rendre la page interactive. Ce processus consiste à exécuter les composants d'application à partir de la racine et à traverser l'arborescence des composants pour comprendre l'état, les liaisons et les gestionnaires d'événements.
Parce que l'hydratation doit visiter chaque composant de l'arbre de rendu actuel pour déterminer s'il doit être interactif, il oblige tous ces composants à charger et à exécuter avec impatience. Cela signifie que même si vous marquez certains composants pour le chargement paresseux, l'hydratation les fera toujours être chargés immédiatement s'ils font partie de l'arbre de rendu initial. L'hydratation est séquentielle et ne peut pas ignorer les composants intermédiaires pour hydrater directement les composants de l'enfant, de sorte que tous les composants parents doivent être hydratés en premier [1] [6].
Pourquoi l'hydratation sabote le chargement paresseux
- Exécution impatient: l'hydratation nécessite l'exécution de tous les composants dans l'arborescence de rendu, ce qui empêche le chargement paresseux de différer le chargement du code pour ces composants.
- Dépendances des composants: les composants de l'enfant dépendent des accessoires des composants parents, de sorte que les parents doivent être hydratés en premier, forçant une chaîne de chargement impatiente.
- Manipatives d'événements et état: l'hydratation doit également configurer les écouteurs d'événements et restaurer l'état, ce qui nécessite l'exécution du code des composants à l'avance.
- Charge des développeurs: Pour obtenir un chargement paresseux pendant l'hydratation, les développeurs doivent gérer manuellement la préfecciation et la division du code, qui peuvent être complexes et sujettes aux erreurs [6] [7].
Lorsque le chargement paresseux fonctionne malgré l'hydratation
Le chargement paresseux peut toujours être efficace pour les composants qui ne font pas partie de l'arbre de rendu initial et donc non visités pendant l'hydratation. Les exemples incluent:
- Dialogues ou modaux qui s'ouvrent sur l'interaction utilisateur
- Composants sur différentes routes qui ne sont pas rendues initialement
Dans ces cas, les composants peuvent être vraiment chargés de paresseux car l'hydratation ne force pas leur exécution immédiate [6].
Techniques pour optimiser l'hydratation et le chargement paresseux
Certains cadres et bibliothèques modernes tentent d'optimiser cette interaction en mettant en œuvre une hydratation paresseuse ou une hydratation sélective, où les composants sont hydratés uniquement en cas de besoin, comme lorsqu'ils deviennent visibles dans la fenêtre:
- Les bibliothèques comme `Next-paresseux-hydratation-sur-scroll` dans next.js permettent à l'hydratation d'être différée jusqu'à ce qu'un composant défile en vue.
- En utilisant l'API IntersectionObserver, les composants peuvent être chargés et hydratés paresseux uniquement lorsqu'ils entrent dans la fenêtre.
- Dans Vue / Nuxt, les techniques et plugins d'hydratation paresseux (par exemple, «nuxt-lazy-hydrate») permettent à l'hydratation d'être retardée jusqu'à ce que le thread principal soit inactif ou que le composant soit visible, améliorant le temps vers les métriques interactives et des premières entrées [4] [5].
Résumé
L'hydratation et le chargement paresseux sont fondamentalement en désaccord car l'hydratation nécessite une exécution impatient des composants dans l'arborescence de rendu, ce qui empêche le chargement paresseux de reporter l'exécution du code. Cependant, le chargement paresseux reste efficace pour les composants en dehors de la portée d'hydratation initiale. Les techniques émergentes comme l'hydratation paresseuse visent à concilier ce conflit en reportant l'hydratation elle-même, en améliorant les performances et l'expérience utilisateur.
Essentiellement, l'hydratation sabote le chargement paresseux pendant la charge de page initiale, mais avec des choix architecturaux minutieux et des outils spécialisés, les développeurs peuvent optimiser quand et comment les composants sont hydratés pour retrouver les avantages du chargement paresseux [1] [6] [7].
Citations:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loking-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-optimisation
[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-hévery-3883b1_lazy-loading-is-like-exercise-everyone-says-activity-7115086933935984641-5oxk
[8] https://www.techtarget.com/searchsoftwarequality/definition/lazy-loading