Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

Maurício Bruno

July 02, 2023
Tweet

Other Decks in Technology

Transcript

  1. PADRÕES DE
    RENDERIZAÇÃO
    DESVENDANDO
    DE APPS WEB

    View full-size slide

  2. Maurício Bruno
    Frontend Engineer @ Woohoo+
    mbrunos.dev
    mbrunos

    View full-size slide

  3. VOCÊ USARIA?
    QUAL STACK
    Landing Page + Loja

    View full-size slide

  4. Dados + Código = HTML
    PADRÕES DE
    RENDERIZAÇÃO?
    O QUE SÃO

    View full-size slide

  5. DISCLAIMER
    Single Page Apps
    e
    Multi Page Apps

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  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

    View full-size slide

  12. O MELHOR?
    E AÍ, QUAL

    View full-size slide