Middle
Quais são os tipos de renderização de páginas existentes?
sobes.tech IA
Resposta da IA
- Renderização assíncrona (Async Rendering): Partes da página (por exemplo, dados obtidos através de pedidos AJAX) são carregadas e exibidas gradualmente, sem bloquear o carregamento da estrutura principal.
- Renderização no lado do cliente (Client-Side Rendering, CSR): O navegador carrega um ficheiro HTML mínimo que contém um link para um pacote JavaScript. Este pacote é executado no navegador e constrói dinamicamente o DOM.
- Renderização no lado do servidor (Server-Side Rendering, SSR): O servidor gera um documento HTML completo com conteúdo para cada página visitada e envia-o ao navegador. O navegador exibe a página já pronta.
- Renderização estática (Static Rendering / Static Site Generation, SSG): As páginas são geradas na forma de ficheiros HTML estáticos durante a compilação do projeto. Estes ficheiros são depois entregues ao utilizador, garantindo uma carga muito rápida.
- Renderização isomórfica (Isomorphic / Universal Rendering): Código JavaScript que pode ser executado tanto no servidor como no cliente. Isto permite renderizar primeiro a página no servidor (para acelerar a primeira visualização e SEO), e depois transferir o controlo para o cliente para a interatividade.
| Tipo de renderização | Onde ocorre | Carregamento inicial | SEO | Interatividade |
|---|---|---|---|---|
| CSR | Cliente (navegador) | Mais lento que o conteúdo inicial | Pode ser mais difícil | Alta após o carregamento do JS |
| SSR | Servidor | Mais rápido que o conteúdo inicial | Bom | Aparece após o carregamento do JS |
| SSG | Construção do projeto | Muito rápido | Excelente | Depende do JS adicionado após o carregamento estático |
| Isomórfico | Servidor e cliente | Primeira visualização rápida | Bom | Alta após "hidratação" |