Todo mundo fala sobre hidratação parcial e seus termos irmãos — ilhas, hidratação progressiva, hidratação donut, hidratação seletiva — mas o que isso significa? E as estruturas realmente dão suporte à hidratação parcial? A engenheira sênior de software do Google Jessica Janiuk, que trabalha na equipe do framework Angular, passou de seis a oito meses pesquisando hidratação parcial.
O que ela encontrou foi confusão e desacordo sobre a terminologia, muita conversa fiada e, ainda assim, não muitos frameworks que realmente suportam formas de hidratação parcial, ela disse durante um webcast da conferência Web Unleashed de 10 a 11 de outubro.
O que é hidratação?
Janiuk notou que havia muita confusão sobre o que hidratação realmente significa, então ela começou definindo-a. "É uma otimização de carga inicial de renderização do lado do servidor para aplicativos da web", ela disse à audiência. Ela então explicou o que realmente acontece durante a hidratação.
"Temos um pequeno servidor web feliz aqui, e esse servidor web tem seu aplicativo nele," ela disse. "Esse servidor web é como, 'Ótimo, vou renderizar isso', mas o que ele realmente faz é gerar alguns nós DOM."
Os nós DOM acabam sendo apenas uma sequência de caracteres que é passada para o navegador do cliente, que renderiza o HTML, ela continuou. "Vai parecer com seu aplicativo porque tem as folhas de estilo e tudo que é parte do que o servidor renderizou para você," ela disse. "Mas ele não sabe nada sobre JavaScript ainda, então é como se fosse realmente confuso — deveria haver um aplicativo aqui."
O processo de hidratação basicamente faz com que o navegador carregue o aplicativo. "Então, ele buscará o JavaScript do aplicativo, que então será inicializado," ela disse. "Isso faz parte de cada framework web ou de cada aplicativo, [ele] tem que executar uma função que desperta o aplicativo e inicializa todas as suas dependências e componentes e qualquer coisa que você esteja usando," ela explicou. "Não são apenas os frameworks web que fazem isso. Praticamente todo pedaço de código por aí tem que inicializar de alguma forma."
O processo de hidratação basicamente faz com que o navegador carregue o aplicativo. "É a junção do DOM que foi renderizado pelo seu servidor web e o aplicativo despertando e identificando o que é esse DOM — esse é o processo de hidratação, reunindo novamente o código do seu aplicativo com o DOM," disse ela.
Hidratação Parcial
Em vez de hidratar completamente o aplicativo imediatamente, a hidratação parcial permite que os desenvolvedores identifiquem partes do aplicativo — talvez um rodapé ou algo que o usuário não precisará ver imediatamente — e, em vez de enviar todo o JavaScript no aplicativo, ele "hidrata" apenas as partes que são necessárias imediatamente.
"Hidratação parcial [é] o conceito de que você não precisa fazer a coisa toda," ela disse. "A terminologia existente neste espaço — e isso foi parte do processo de pesquisa que passei para entender o espaço — se você pesquisar hidratação parcial no Google, verá muitos resultados. Mas o que aprendemos é que ninguém concorda sobre o que isso significa, e há um monte deles."
A alternativa não tão boa para hidratação parcial
A alternativa, disse Janiuk, é fazer o que o Angular fez algumas versões atrás. Eles chamaram isso de hidratação destrutiva.
"O que era realmente apenas uma palavra-código para não hidratarmos — nós apenas destruímos o que está lá e repintamos," ela disse. "Simplesmente não é o ideal. Nessa situação, o aplicativo diz: 'Não me importa o que está lá antes, vou apenas limpar tudo e vou reinicializar e repintar tudo no lado do cliente.' Mas há algumas grandes desvantagens nisso, porque a hidratação é melhor. Se você fizer essa destruição, isso terá um impacto bastante negativo em seus principais web vitals."
Os principais web vitais são as métricas usadas para medir o desempenho do seu aplicativo ou páginas da web, ela acrescentou. "Você verá que se fizer essa versão destrutiva, como seu CLS (Cumulative Layout Shift), sua mudança de layout, ela será vista como uma mudança de layout de aplicativo inteiro, e há uma oscilação, e […] a duração que leva antes que [a] mudança seja feita será muito posterior. O mesmo com seu LCP ( Largest Contentful Paint ) e seu FID ( First Input Delay ), isso vai atrasar tudo para que você tenha um período de tempo maior. É por isso que a hidratação é importante."
Compreendendo os tipos de hidratação
Fala-se muito sobre hidratação parcial, mas a realidade é que não há muita hidratação parcial acontecendo, disse Janiuk. "A hidratação parcial se tornou uma espécie de tópico da moda entre autores de frameworks e algumas pessoas na indústria," ela disse. "O que aprendemos é que ninguém concorda sobre o que isso significa."
Isso não foi tudo que ela aprendeu com sua pesquisa. "Na verdade, ficamos bastante surpresos porque, com toda essa conversa que ouvimos sobre hidratação parcial, isso realmente não existe muito," acrescentou ela.
Variações sobre hidratação parcial
Embora não seja tão amplamente aceito, há muitos termos para descrever a hidratação parcial, todos com uma ligeira variação no tema, ela descobriu.
Ilhas: Isso se refere a uma abordagem que habilita a hidratação de "ilhas" em um aplicativo da web. O framework JavaScript Astro usa essa abordagem. "Se você imaginar um pequeno oásis no meio de um deserto, o deserto está desidratado. A ilha no meio está hidratada. Você tem uma ilha de interatividade; está toda cercada por conteúdo desidratado," ela disse. "Pode não ser separado. Depende da implementação. Pode ser uma aplicação isolada. Por exemplo, se você usar o Astro, você pode criar pequenas ilhas de luz individuais com o Astro, e elas são independentes umas das outras. Ele pode compartilhar dados. Ele pode compartilhar dependências."
Hidratação de Donut: O termo não é muito usado, ela disse, mas a equipe Angular o usa porque ele "descreve com precisão o conceito do donut sendo o que é hidratado e a parte do buraco do donut sendo o que não é hidratado," ela explicou. É muito semelhante ao que a Angular acabou implementando, ela acrescentou.
Hidratação do Donut Hole: O buraco é hidratado, mas o "donut" ao redor não é. "Isso é essencialmente o equivalente a ilhas," disse Janiuk. "É o inverso da hidratação do donut."
Hidratação seletiva: Este é um tipo de hidratação parcial que requer streaming. "À medida que seus componentes estão fluindo, eles permanecem desidratados até que o streaming termine para aquele componente, e então ele realmente hidrata aquele componente," disse Janiuk. "Então não é realmente como muitos dos outros tipos de hidratação sobre os quais falamos porque depende exclusivamente do streaming."
Hidratação progressiva: A hidratação seletiva é um aspecto da hidratação progressiva e é usada no modo concorrente do React, ela disse. É semelhante ao que o framework Angular fará, ela acrescentou. Ele foi projetado para gerar pedaços menores para os componentes que o desenvolvedor escolher. Os desenvolvedores podem especificar a sequência na qual os pedaços serão carregados e hidratados.
O que as estruturas oferecem
Vue: "O que descobrimos é que simplesmente não há suporte nativo para isso [hidratação parcial]. Já foi falado sobre isso. Encontramos uma biblioteca comunitária que algumas pessoas provavelmente estão usando, não me lembro qual versão ela suporta para Vue, mas havia essencialmente uma proposta que foi escrita dentro do repositório Vue para adicionar suporte básico para isso, mas não tinha realmente ido a lugar nenhum," de acordo com sua pesquisa alguns meses atrás, disse Janiuk.
Svelte: "O Svelte, da mesma forma, não tem suporte nativo no SvelteKit," ela disse.
Solid: Nenhum suporte nativo ainda. Embora Ryan Carniato, criador do Solid, tenha falado sobre isso com a equipe Angular, ele disse que não há planos para implementar hidratação parcial no curto prazo porque a equipe está focada no SolidStart agora. "Talvez depois que lançarmos o nosso, ele, ele vai considerar isso," ela disse.
Astro: O Astro implementa hidratação parcial como ilhas. Ele permite que você compartilhe dados entre as ilhas, disse Janiuk. "O que descobrimos é que os dados não têm impacto sobre se você quer acordar em uma ilha," ela disse. "Se os dados mudarem entre eles, você ainda terá que usar um gatilho diferente para acompanhá-los. Eles estão essencialmente isolados um do outro, além de poderem compartilhar esses dados."
Wiz e Qwik: Wiz é um framework interno do Google e inspirou o Qwik porque "é o framework resumível original," ela disse. O Google está tentando encontrar primitivos e "sinergias" entre Angular e Wiz agora. "Essas são estruturas que são essencialmente projetadas em torno dessa otimização de carga inicial," ela disse. "Elas essencialmente reduzem a quantidade de JavaScript que enviam para quase nada. Há um pouco que é enviado imediatamente, e então eles adiam a carga o máximo que podem." As pessoas falarão sobre o Qwik não enviar JavaScript, e isso pode ser verdade para a primeira carga, disse Janiuk, mas conforme os desenvolvedores usam componentes, eles começam a acordar, e ele realmente tem que buscá-los naquele ponto.
A abordagem de hidratação incremental do Angular
Angular decidiu chamar sua abordagem de hidratação parcial de "hidratação incremental" porque eles sentiram que a terminologia estava "por todo lugar," ela disse. Apresentar isso ao Angular foi um "enorme esforço de vários anos" que exigiu construir em cima e aprimorar novos recursos em várias versões. Por exemplo, ele enviou a visualização adiável na versão 15.
"Visualizações diferíveis são nossa primitiva de estrutura nativa de carregamento lento para poder adiar pedaços de carga e especificar quando eles carregam," ela disse. As visualizações diferíveis permitem que os componentes retardem a renderização de seu conteúdo até que se tornem visíveis na viewport, melhorando assim o desempenho percebido e reduzindo os tempos de carga inicial.
Então, na versão 18, eles lançaram o replay de eventos. "Basicamente, a ideia por trás disso é que quando você faz a hidratação completa do aplicativo, há um período de tempo antes que a hidratação ocorra que seu site está lá, mas não é realmente interativo. As pessoas podem clicar em coisas e isso não faz nada, e esses cliques são perdidos, normalmente," disse ela. "Trabalhamos com a equipe do Wiz e usamos uma biblioteca que eles criaram chamada JsAction, que é uma pequena biblioteca que permite que esses eventos sejam capturados e enfileirados, e então, uma vez que seu aplicativo inicializa, ele reproduz todos eles na mesma sequência em que foram clicados, então nada dessa interatividade é perdido."
O bloco Defer também desempenha um papel. Blocos Defer no Angular são usados para atrasar a execução de certas partes do template de um componente até que sejam necessárias. Os desenvolvedores podem especificar o que irá disparar a interação — por exemplo, pode ser um clique, uma interação direta, um retorno de chamada.
"É assim que habilitamos a hidratação parcial," ela explicou. "Basicamente, você cria seu bloco de adiamento. Você tem um gatilho, e então você pode especificar, ei, mas eu queria hidratar neste gatilho separado."
"Achamos que essa é uma maneira muito, muito incrível de especificar porque não é muito código, e você meio que tira da caixa," continuou Janiuk. "O que é legal é que esses gatilhos essencialmente dizem ao seu servidor que, em vez de renderizar um espaço reservado apenas no servidor, ignore que isso deveria ser adiado, busque todas essas dependências, renderize-o no servidor e, então, quando você chegar ao cliente, esse conteúdo ainda será adiado, então você realmente obtém seu código de modelo real como seu espaço reservado nesse caso, que é exatamente o que você quer."
E faz isso sem uma mudança de layout, ela acrescentou. O Angular tem um código separado que manipula qualquer coisa que não seja um evento nativo do navegador, tem instruções adicionais e exige que os desenvolvedores também realizem "anotações".
"A anotação é uma grande parte da hidratação porque, para saber o que está lá, temos que serializar todas essas informações sobre o DOM para que, quando o aplicativo inicializar, ele possa olhar para isso e dizer, então, quantos nós raiz estão aqui? São cinco, ok. E então precisamos saber sobre qualquer projeção de conteúdo? E sobre um fluxo de controle? E se houver um if?", ela disse. "Então, temos que ter todas essas informações conforme são serializadas no rodapé; lemos isso durante o processo de hidratação."
Janiuk disse que os novos recursos provavelmente estarão disponíveis na versão 19, que será lançada em novembro, então os desenvolvedores poderão usá-los nas próximas versões candidatas.
