Iniciante Arquitetura de Sistemas

SSR (Server-Side Rendering)

SSR é quando o servidor monta o HTML pronto e envia para o navegador. O usuário recebe a página já com conteúdo, sem esperar o JavaScript construir tudo. É o oposto de renderizar tudo no navegador.

SSR x CSR

  • SSR (Server-Side Rendering): o servidor gera o HTML completo.
  • CSR (Client-Side Rendering): o servidor manda um HTML quase vazio e o navegador monta a página com JavaScript.
SSR:
Navegador -> pede página
Servidor  -> monta HTML completo -> envia
Navegador -> mostra na hora

CSR:
Navegador -> pede página
Servidor  -> HTML vazio + JS
Navegador -> baixa JS -> monta -> mostra (demora mais)

Como o SSR funciona

GET /produtos HTTP/1.1
Host: loja.com
HTTP/1.1 200 OK
Content-Type: text/html

<html>
  <body>
    <h1>Produtos</h1>
    <ul><li>Livro</li><li>Caneta</li></ul>
  </body>
</html>

O conteúdo já vem no HTML, pronto para exibir.

SEO

Buscadores leem HTML. Se a página depende de JavaScript para mostrar conteúdo (CSR), o buscador pode ver uma página vazia. Com SSR, o conteúdo já está no HTML, então é indexado bem. Por isso SSR ajuda muito em sites que precisam aparecer no Google.

Vantagens

  • Primeiro carregamento mais rápido para o usuário.
  • Melhor para SEO.
  • Funciona mesmo com JavaScript fraco ou desligado.

Desvantagens

  • Mais carga no servidor: ele monta cada página.
  • Navegação interna pode ficar menos fluida que numa SPA pura.
  • Setup mais complexo que um site só de front.

Quando usar

  • Sites de conteúdo, blogs, lojas, landing pages: SEO e velocidade importam, use SSR.
  • Painéis internos e apps atrás de login, onde SEO não conta: CSR costuma bastar.

Muitos frameworks modernos misturam os dois: SSR no primeiro acesso, depois o navegador assume. O melhor dos mundos.