O que é renderização progressiva?

O rendering progressivo é uma técnica de otimização da velocidade de carregamento e exibição de páginas web, na qual o conteúdo é carregado e exibido de forma progressiva, em vez de tudo de uma vez.

As suas principais vantagens:

Uma renderização mais rápida do conteúdo significativo inicial (First Meaningful Paint).
Melhor perceção da velocidade de carregamento pelo utilizador.
Redução do tempo até à interatividade (Time to Interactive).

As principais técnicas de rendering progressivo incluem:

Carregamento preguiçoso (Lazy Loading): Adiar o carregamento de recursos não essenciais (como imagens ou vídeos) até que sejam necessários para o utilizador (até que ele percorra a página até eles).
```

<img src="placeholder.png" data-src="real-image.jpg" alt="Exemplo de imagem" loading="lazy">
```

Rendering no lado do servidor (Server-Side Rendering - SSR) : Gerar a página HTML no servidor e enviar o conteúdo já renderizado ao navegador.

// Exemplo de uso de um framework para SSR (por exemplo, Next.js)
// functions/api.js
// export async function getServerSideProps(context) {
//   // Obter dados no servidor
//   const data = await fetchData();
//   return {
//     props: { data }, // Passar dados ao componente
//   }
// }
//
// function MyPage({ data }) {
//   // Renderizar componente com dados
//   return <div>{/* ... */}</div>
// }

Rendering no lado do cliente (Client-Side Rendering - CSR) com hidratação: O navegador recebe HTML e JavaScript mínimos. Depois, o JavaScript carrega os dados e renderiza completamente a página no navegador. A hidratação é o processo de anexar manipuladores de eventos ao conteúdo já renderizado pelo SSR no cliente.

Transmissão em streaming de HTML (Streaming HTML): Enviar HTML em partes à medida que é gerado no servidor, permitindo que o navegador comece a analisar e renderizar antes de o documento estar completamente carregado.

<!-- Exemplo de transmissão em streaming hipotética -->
<html>
  <head>
    <title>Página em streaming</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <!-- Parte do HTML enviada primeiro -->
    <h1>Título</h1>
    <script src="script.js" async></script>
    <!-- O resto do HTML pode ser enviado mais tarde -->
  </body>
</html>

CSS crítico / CSS em linha (Critical CSS / Inline Critical CSS): Incluir estilos CSS necessários para mostrar a parte visível da página (Above the Fold), para acelerar o render inicial. Os outros estilos são carregados de forma assíncrona.

Técnica	Descrição	Vantagens	Desvantagens
Carregamento preguiçoso	Carregamento adiado de recursos fora da área visível	Carregamento rápido do conteúdo visível	Pode requerer JavaScript para implementação
SSR	Renderização no servidor, envio do HTML pronto	Renderização rápida do conteúdo inicial, amigável para SEO	Aumenta a carga no servidor
CSR com hidratação	Renderização inicial no cliente com hidratação posterior do conteúdo SSR	Aplicações dinâmicas	Carregamento longo e interatividade sem SSR
Transmissão em streaming de HTML	Envio de HTML em partes	Início rápido do parsing	Depende da implementação do servidor
CSS crítico	Inclusão de estilos em linha para a parte visível	Renderização rápida da parte visível	Requer ferramentas para extrair CSS crítico

O rendering progressivo é uma combinação dessas técnicas e outras, visando melhorar a experiência do utilizador acelerando o rendering da página web.