O carregamento preguiçoso e a hidratação de aplicação interagem de maneira complexa e muitas vezes conflitante, principalmente porque a hidratação requer a execução do código do aplicativo ansiosamente, o que prejudica os benefícios do carregamento preguiçoso.
como a hidratação funciona e seu impacto no carregamento preguiçoso
A hidratação é o processo pelo qual uma página HTML renderizada pelo servidor é "ativada" no lado do cliente, executando o JavaScript para anexar ouvintes de eventos, restaurar o estado do componente e tornar a página interativa. Esse processo envolve a execução dos componentes do aplicativo, começando pela raiz e atravessando a árvore do componente para entender o estado, as ligações e os manipuladores de eventos.
Como a hidratação deve visitar todos os componentes na árvore de renderização atual para determinar se ela precisa ser interativa, força todos esses componentes a serem carregados e executados ansiosamente. Isso significa que, mesmo que você marque alguns componentes para carregar preguiçosos, a hidratação ainda fará com que eles sejam carregados imediatamente se fizerem parte da árvore de renderização inicial. A hidratação é seqüencial e não pode pular componentes intermediários para hidratar diretamente os componentes da criança; portanto, todos os componentes dos pais devem ser hidratados primeiro [1] [6].
Por que a hidratação sabota o carregamento preguiçoso
- Execução ansiosa: a hidratação requer a execução de todos os componentes na árvore de renderização, o que impede que o carregamento preguiçoso adie o carregamento do código para esses componentes.
- Dependências dos componentes: os componentes filhos dependem de adereços dos componentes dos pais, para que os pais devem ser hidratados primeiro, forçando uma cadeia de carregamento ansioso.
- Manipuladores de eventos e estado: a hidratação também deve configurar ouvintes de eventos e restaurar o estado, o que requer o código de componente em execução antecipadamente.
- Carga do desenvolvedor: Para alcançar o carregamento preguiçoso durante a hidratação, os desenvolvedores devem gerenciar manualmente a pré-busca e a divisão de código, que podem ser complexos e propensos a erros [6] [7].
quando o carregamento preguiçoso funciona apesar da hidratação
O carregamento preguiçoso ainda pode ser eficaz para componentes que não fazem parte da árvore de renderização inicial e, portanto, não visitados durante a hidratação. Exemplos incluem:
- diálogos ou modais que abrem na interação do usuário
- componentes em diferentes rotas que não são renderizadas inicialmente
Nesses casos, os componentes podem ser realmente preguiçosos, porque a hidratação não force sua execução imediata [6].
técnicas para otimizar a hidratação e o carregamento preguiçoso
Algumas estruturas e bibliotecas modernas tentam otimizar essa interação implementando hidratação preguiçosa ou hidratação seletiva, onde os componentes são hidratados apenas quando necessário, como quando se tornam visíveis na viewport:
-bibliotecas como `a seguir-lazy-hidration-on-scroll` no próximo.js permitem que a hidratação seja adiada até que um componente role em exibição.
- Usando a API IntersectionObserver, os componentes podem ser carregados e hidratados apenas quando entram na visualização.
-Em vue/nuxt, técnicas e plugins preguiçosos de hidratação (por exemplo, `nuxt-lazy-hydrate`) permitem que a hidratação seja atrasada até que a rosca principal esteja inativa ou o componente esteja visível, melhorando o tempo para as métricas de atraso interativo e de primeira entrada [4] [5].
Resumo
A hidratação e o carregamento preguiçoso estão fundamentalmente em desacordo, porque a hidratação requer a ansiedade ansiosa dos componentes na árvore de renderização, o que impede que o carregamento preguiçoso de adiar a execução do código. No entanto, o carregamento preguiçoso permanece eficaz para componentes fora do escopo inicial de hidratação. Técnicas emergentes, como a hidratação preguiçosa, visam conciliar esse conflito, adiando a própria hidratação, melhorando o desempenho e a experiência do usuário.
Em essência, a hidratação sabota o carregamento preguiçoso durante a carga inicial da página, mas com escolhas arquitetônicas cuidadosas e ferramentas especializadas, os desenvolvedores podem otimizar quando e como os componentes são hidratados para recuperar os benefícios da carga preguiçosa [1] [6] [7].
Citações:
[1] https://www.infoq.com/presentations/hydration-lazy-loading/
[2] https://qconsf.com/presentation/oct2023/hydration-and-lazy-loading-are-encompatível
[3] https://github.com/vercel/next.js/discussions/29751
[4] https://www.wisp.blog/blog/lazy-loading-n-nextjs-the-future-of-resource-timization
[5] https://vueschool.io/articles/vuejs-tutorials/lazy-hydration-and-erver-components-in-nuxt-vue-js-3-performance/
[6] https://www.builder.io/blog/hydration-sabotages-lazy-loading
[7] https://www.linkedin.com/postss/misko-hevery-3883b1_lazy-loading-s-is-like-exercise-everyone-says-activity-711508693935984641-5oxk
[8] https://www.techtarget.com/searchSoftwareQuity/definition/lazy-loading