A renderização refere-se ao processo de criação do código necessário para criar uma página que os usuários finais possam interagir no navegador. Isso inclui preparar o conteúdo, aplicar a lógica e o processamento e incluir elementos da IU e outros componentes necessários para exibir a página final. Os aplicativos orientados a conteúdo têm como foco principal velocidade de carregamento, baixa latência e tempos de renderização rápidos.
Renderização do lado do servidor (SSR, na sigla em inglês)
A renderização do lado do servidor (SSR, na sigla em inglês) envolve a renderização de páginas da Web no servidor e o envio do HTML completamente renderizado para o navegador do cliente, em vez de renderizá-las no lado do cliente com JavaScript. Quando os usuários acessam um aplicativo, o navegador envia uma solicitação ao servidor. O aplicativo processa a solicitação no servidor, que inclui a coleta de dados de bancos de dados ou APIs externas, e renderiza o HTML da página solicitada. Em seguida, o servidor envia o HTML totalmente renderizado da página de volta ao navegador do usuário. Quando o navegador do usuário recebe o HTML, ele carrega todos os arquivos JavaScript necessários.
Os benefícios do uso da SSR incluem uma velocidade de carregamento inicial rápida, bom desempenho de otimização de mecanismos de pesquisa (SEO, na sigla em inglês), confiabilidade e uma boa experiência geral do usuário. No entanto, a implementação da SSR pode ser mais complexa do que a renderização do lado do cliente (CSR, na sigla em inglês) devido à sobrecarga de desempenho e à habilidade de desenvolvimento necessária para criar e manter aplicativos compatíveis com SSR. A SSR é especialmente vantajosa para aplicativos da Web voltados para conteúdo, plataformas de e-commerce e qualquer aplicativo que requer bom desempenho de SEO e velocidades rápidas de resposta inicial.
Geração de site estático (SSG, na sigla em inglês)
A geração de sites estáticos (SSG, na sigla em inglês) gera arquivos HTML estáticos no tempo de build e os envia aos usuários sem renderização do lado do servidor ou do cliente. O conteúdo da Web é criado, geralmente em um formato estruturado, como Markdown, JSON ou YAML, e inclui texto, imagens e outros recursos. Uma ferramenta geradora de site estático, como o Hugo ou o Jekyll, processa o conteúdo e gera arquivos HTML, CSS e JavaScript. A saída estática é o site inteiro, e esses arquivos estáticos são implantados em um servidor da Web, CDN ou serviço de hospedagem.
Saiba mais sobre CSS e HTML em web.dev.
Como os arquivos são estáticos, eles podem ser armazenados em cache e, portanto, carregados muito rapidamente. O SSG é uma boa opção para aplicativos da Web que não mudam com frequência ou que são atualizados por builds periódicos de sites. Ele não é adequado para aplicativos da Web com interatividade dinâmica.
Renderização do lado do cliente (CSR)
A renderização do lado do cliente (CSR, na sigla em inglês) ocorre no navegador do cliente, não no servidor. Geralmente, os aplicativos da Web são carregados em modelos HTML mínimos e, em seguida, o conteúdo é manipulado dinamicamente usando JavaScript e dados de servidores ou APIs. Após a solicitação do aplicativo, o servidor envia um documento HTML mínimo com a estrutura básica e o código JavaScript necessários para renderizar a página. O código JavaScript é executado no navegador do usuário. Em seguida, o código processa os dados buscados e gera o conteúdo, incluindo CSS, HTML e todos os elementos interativos. Em seguida, o código JavaScript responde à interação do usuário, como o envio do formulário.
Os benefícios dos CSR incluem transições rápidas de página e interfaces responsivas. Os aplicativos da Web baseados em CSR geralmente têm tempos de carregamento iniciais lentos em comparação com a SSR e podem apresentar desafios de SEO. À medida que os aplicativos de CSR crescem, eles podem se tornar bastante complexos de desenvolver e manter.