
The Dawn of Single Page SPA Applications
O modelo de aplicativo de página única (SPA) cresceu em popularidade nos últimos anos. É compreensível, esta abordagem dá um certo lucro em termos de velocidade, qualidade de serviço e cria a base para novos padrões de desenvolvimento web do cliente.
Como todos, creio, sabem, o SPA funciona dentro do navegador e não requer recarregamento da página durante o uso.
Boa ideia! Mas, é claro, existem armadilhas.
Entre os casos mais comuns (se você seguir algum tutorial sobre react ou vue), a página principal index.html contém um arquivo HTML quase vazio com um pequeno número de CSS, JavaScript, fontes, etc. que são globais para todo o projeto.
E esse é o problema:
- Durante a renderização inicial, o usuário terá que esperar que toda a base de código e todos os recursos sejam carregados (é claro, há exceções e você pode implementar o carregamento dinâmico dos chamados blocos js / css, mas isso é outra história)
- Alguns rastreadores ou analisadores que não podem esperar pelo carregamento de solicitações assíncronas simplesmente verão todas as páginas em branco
Bem, essa é a ideia:
<!DOCTYPE html>
<html>
<head>
<title>My first SPA app</title>
<script src="https://cdn__"></script>
</head>
<body>
<div id="app"></div>
<script>
...
,
...
</script>
</body>
</html>
SSR de renderização do lado do servidor
Ao contrário do Client Side Rendering (CSR), que usa o navegador para renderizar todo o conteúdo do aplicativo e recuperar dados de APIs e similares, o SSR usa ... o servidor. Ou seja, toda a mesma renderização e recuperação de dados são processadas pelo servidor (NodeJS usando Express, Next, Vue SSR, Nuxt ou qualquer outro ...), e então a resposta com marcação HTML, estilos, scripts e os dados recebidos da API, enviado para o navegador.
Assim, você pode tirar proveito de duas abordagens: velocidade / SEO e interatividade / UX.
Então, o que é hidratação / reidratação?
A reidratação é uma espécie de ponte entre SSR e CSR.
Existe um indicador de desempenho de página da web como First Contentful Paint (FCP) - traduzido aproximadamente, soará como 'primeira renderização significativa' - o momento em que o navegador começou a exibir qualquer texto, imagens (incluindo fundo). Estes são os primeiros elementos que o usuário verá na página. Ao criar um relatório com o Lighthouse no Chrome, na guia de desempenho, você verá imediatamente essa métrica.
O tempo gasto na geração de conteúdo no servidor será o tempo da Primeira Pintura com Conteúdo.
Imediatamente depois disso, o JavaScript do lado do cliente começa a execução para criar um aplicativo cliente completo (na maioria dos casos, estruturas populares são dom virtual e uma interface de ligação para gerenciá-lo).
Neste ponto, não há necessidade de renderizar novamente todo o DOM no cliente, mas você precisa adicionar os eventos ausentes, métodos e, em alguns casos, elementos que não foram renderizados no servidor.
É este processo que se denomina hidratação / reidratação. Uma descrição um pouco mais detalhada pode ser encontrada no Guia Vue SSR (que também está em russo), mas, de acordo com alguns recursos desta estrutura específica.
atuação
Mas nesta parte, alguns problemas aparecem. A reidratação tem um certo inconveniente - é o tempo antes da interação ou Tempo de Interação, que pode ser visto no mesmo, conhecido por nós, Lighthouse Chrome. Mesmo que você tenha organizado tudo perfeitamente no lado do servidor e a página tenha uma primeira renderização rápida do conteúdo, o usuário só poderá interagir com ela após a reidratação do CSR, que às vezes é bem lenta. Esta é uma grande desvantagem em termos de UX.
Outro indicador de Atraso Máximo de Entrada Potencial é o primeiro atraso de entrada (FID) - uma das métricas de desempenho de páginas da web que descreve o tempo decorrido desde o momento em que o usuário começou a interagir com a página da web, ou seja, e. clicado em um link, botão ou usa um controle baseado em JavaScript até que o navegador da web possa responder à interação (conforme determinado no site mozilla).
E o tempo de reidratação afeta diretamente esse indicador. E quanto mais componentes e lógica houver em sua página, mais rápido esse indicador aumenta.
Uma solução é a carga lenta para hidratação.
Um exemplo de implementação de uma abordagem semelhante no Vue SSR / NuxtJS é o pacote vue-lazy-hydration(no repositório npm), que implementa hidratação apenas na parte visível da janela de visualização do navegador e "hidrata" o resto apenas se a página for rolada. Recomendações para usar este pacote também foram encontradas no habr no tutorial Criar uma loja online em Nuxt.js , para o qual o autorAntonMoskalchenkoQuero expressar minha gratidão especial. Em seu artigo, Lighthouse Chrome alcançou 100% de desempenho.