Renderização no Servidor (SSR)

Páginas são renderizadas no servidor para cada requisição. Perfeito para E-commerce, Perfis e aplicações com dados em tempo real onde conteúdo fresco e personalizado é essencial.

Servidor

🌐
Request
Response
🖥️
Servidor recebe requisição
Servidor busca dados
React.renderToString()
Servidor envia HTML renderizado

Cliente

Cliente recebe HTML
React.hydrate()
✨Página interativa
Benefícios x Trade-offs

Benefits

  • •SEO Otimizado: Motores de busca podem rastrear conteúdo
  • •Carregamento Inicial Rápido: HTML pronto imediatamente
  • •Compartilhamento Social: Previews ricos para redes sociais
  • •Acessibilidade: Funciona sem JavaScript

Trade-offs

  • •Maior carga do servidor: Servidor processa cada requisição
  • •Latência aumentada: Servidor deve renderizar antes de enviar
  • •Mais recursos do servidor: Requer mais CPU/memória
  • •Mais lento para alto tráfego: Cada requisição atinge o servidor
Como implementar?

SSR usa Server Components assíncronos. No App Router, renderização dinâmica é o padrão para páginas com dados dinâmicos.

export const dynamic = "force-dynamic";

export default async function ServerComponent() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();

  return <div>{data.message}</div>;
}
  • •Componentes são funções assíncronas (sem diretiva 'use client')
  • •Não pode usar hooks React (useState, useEffect, etc.)
  • •Use fetch() assíncrono para busca de dados no servidor
  • •Busca de dados acontece no servidor para cada requisição