SSR (Server-Side Rendering)

Definição

SSR (Server-Side Rendering) é uma técnica de renderização em que o conteúdo HTML de uma página é gerado no servidor a cada requisição e enviado pronto ao navegador.
Isso permite que o usuário visualize o conteúdo imediatamente, sem depender do carregamento e execução inicial do JavaScript no cliente.

Essa abordagem é comum em frameworks como Next.js, Nuxt e ASP.NET MVC.

Objetivos do SSR

Melhorar o tempo de carregamento inicial, especialmente em conexões lentas.
Melhorar o SEO, já que o conteúdo HTML é entregue pronto ao navegador — permitindo que mecanismos de busca indexem a página corretamente, mesmo sem executar JavaScript.
Exibir conteúdo rapidamente em dispositivos com desempenho limitado.
Distribuir a responsabilidade de renderização, centralizando a geração de HTML no servidor.

Como verificar se uma página está usando SSR?

Você pode inspecionar manualmente uma página para saber se ela utiliza renderização no servidor. Aqui estão duas abordagens comuns:

Verifique o HTML da resposta:
- Abra as Ferramentas de Desenvolvedor do navegador (F12) → aba Network.
- Acesse a página e clique na requisição principal (geralmente com o nome da rota).
- Vá até a aba Response.
- Se o HTML já contém o conteúdo da página (como listas, títulos ou dados dinâmicos), é um indicativo claro de SSR.
(Opcional) Desative o JavaScript para testar:
- Desative o JavaScript nas configurações do navegador ou via DevTools.
- Recarregue a página.
- Se o conteúdo ainda for exibido corretamente, a aplicação provavelmente está usando SSR.
- Se a tela ficar vazia ou incompleta, é provável que dependa apenas de CSR (Client-Side Rendering).

Exemplo conceitual

Usuário acessa /produtos
↓
Servidor processa a rota
↓
Gera o HTML da página com os dados embutidos
↓
Envia esse HTML ao navegador
↓
O conteúdo aparece na tela imediatamente

No caso de um framework como Next.js:

// pages/produtos.js
export async function getServerSideProps() {
  const res = await fetch("https://api.exemplo.com/produtos");
  const produtos = await res.json();

  return { props: { produtos } };
}

export default function Produtos({ produtos }) {
  return (
    <ul>
      {produtos.map((p) => (
        <li key={p.id}>{p.nome}</li>
      ))}
    </ul>
  );
}

Nesse exemplo, os dados são carregados no servidor a cada acesso e a página é entregue com o HTML já renderizado.

O ciclo do SSR

O usuário acessa uma URL.
O servidor recebe e processa a requisição.
O servidor busca dados e gera o HTML completo.
O HTML pronto é enviado ao navegador.
O navegador exibe o conteúdo imediatamente.
(Opcional) O JavaScript é carregado e "hidrata" a página para permitir interações dinâmicas.

Vantagens e desafios

ℹ️ O SSR melhora a performance inicial e o SEO, mas pode aumentar a carga do servidor e introduzir latência em páginas altamente dinâmicas.