SSR
SSR (Server-Side Rendering) é a técnica onde o servidor gera o HTML completo de cada página antes de enviá-lo ao navegador, garantindo que o conteúdo esteja disponível imediatamente para crawlers e usuários.
SSR (Server-Side Rendering) é uma estratégia de renderização onde o servidor processa o código da aplicação e envia ao navegador um HTML já completo com todo o conteúdo. O oposto é o CSR (Client-Side Rendering), onde o servidor envia um HTML mínimo e o JavaScript no browser constrói a página.
SSR é a forma tradicional como a web funcionava antes dos frameworks JavaScript modernos. Com a popularização de SPAs, o CSR virou padrão mas trouxe problemas de SEO. O SSR ressurgiu como solução, agora integrado a frameworks modernos como Next.js, Nuxt e SvelteKit.
Quando usar SSR
SSR é recomendado para páginas que precisam de dados frescos a cada requisição e que precisam ser indexadas pelo Google com conteúdo completo. Páginas de produto de e-commerce, resultados de busca e feeds de conteúdo dinâmico se beneficiam do SSR.
Como funciona na prática
- O usuário acessa uma URL e o navegador faz uma requisição ao servidor
- O servidor executa o código da aplicação, busca os dados necessários e gera o HTML completo
- O HTML com conteúdo já renderizado é enviado ao navegador
- O navegador exibe o conteúdo imediatamente, sem esperar JavaScript carregar
- Em seguida, o JavaScript hidrata a página, tornando-a interativa
Exemplo Prático
Uma página de produto no Mercado Livre usa SSR. Quando o Google acessa a URL, recebe o HTML completo com nome, preço e descrição do produto já no código. Isso garante indexação imediata e correta do conteúdo.
Por que isso é importante?
SSR é essencial para SEO em sites com conteúdo dinâmico. Também melhora o FCP (First Contentful Paint) porque o usuário vê o conteúdo mais rápido, antes mesmo do JavaScript inicializar.
Perguntas Frequentes (FAQ) sobre SSR
Qual a diferença entre SSR e SSG?
SSR gera o HTML em tempo real a cada requisição, sempre com dados frescos. SSG gera o HTML uma única vez no momento do build e serve o mesmo arquivo estático para todos. SSG é mais rápido e mais barato, mas não serve para conteúdo que muda com frequência.
Next.js usa SSR por padrão?
Next.js suporta SSR, SSG e ISR (Incremental Static Regeneration) e você escolhe por página. Por padrão, páginas sem busca de dados são geradas de forma estática (SSG). Páginas que usam getServerSideProps são renderizadas no servidor (SSR).