Desvendando padrões de renderização de apps web

Transcript

1. PADRÕES DE RENDERIZAÇÃO DESVENDANDO DE APPS WEB
2. Maurício Bruno Frontend Engineer @ Woohoo+ mbrunos.dev mbrunos
3. VOCÊ USARIA? QUAL STACK Landing Page + Loja
4. Dados + Código = HTML PADRÕES DE RENDERIZAÇÃO? O QUE SÃO
5. DISCLAIMER Single Page Apps e Multi Page Apps
6. Carregamento rápido, facilmente "cacheável" Dificuldade de atualizar dados Geração do HTML no momento da construção/compilação do app Renderização estática Apps que não precisam processar dados, nem atualizar com frequência
7. Carregamento inicial mais lento, maior carga no servidor Dados dinâmicos no servidor, melhor SEO Processamento de dados e/ou atualização frequente e necessidade de SEO Renderização do lado do servidor Geração do HTML no servidor antes de enviá-lo ao cliente
8. Experiência suave após o carregamento, sem carga no servidor Carregamento inicial mais pesado, dificuldades com SEO Construção do HTML através do Javascript no cliente Renderização do lado do cliente Apps sem necessidade de SEO, interações e atualizações de dados constantes
9. Complexidade adicional Carregamento rápido, atualização de dados frequentes Apps com muitas páginas que não precisam processar dados Renderização estática incremental Apenas algumas páginas são pré- renderizadas, geração sob demanda
10. Carregamento rápido do conteúdo inicial, UX aprimorada Maior carga no servidor, complexidade adicional Geração do HTML no servidor em partes, de acordo com o processamento Renderização do lado do servidor (streaming) Processamento de dados, mas é desejável resposta mais rápida
11. Pouco suporte, não indicado pra páginas altamente interativas Redução do JavaScript no cliente, melhor desempenho Páginas onde há conteúdo estático, mas algumas partes são interativas Hidratação parcial/ilhas Ilhas de interatividade: apenas algumas partes são hidratadas
12. O MELHOR? E AÍ, QUAL
13. OBRIGADO!