SSR, SSG ou CSR: que modo de renderização escolher para posicionar bem o seu site?
Renderização no servidor, geração estática, renderização no navegador: o que estas siglas mudam para o Google, para as IA e para a velocidade do seu site, explicado de forma simples.
Por Léo Chuzel · Publicado a · 3 min de leitura
O seu fornecedor fala-lhe de React, de Next.js, de «SSR» ou de «site estático» e perde o fio à meada? É normal: são escolhas técnicas. Mas têm uma consequência muito concreta para o seu negócio: o Google e os assistentes de IA veem realmente o conteúdo do seu site? Este artigo dá-lhe as chaves para compreender e fazer as perguntas certas.
O problema: uma página que se constrói no navegador
Um site clássico envia ao visitante uma página HTML completa: textos, títulos, links, está tudo lá. Muitos sites modernos funcionam de outra forma. O servidor envia uma página quase vazia e um grande ficheiro JavaScript, e é depois o navegador que fabrica a página. Fala-se de renderização do lado do cliente, ou CSR (Client-Side Rendering).
Para um humano equipado com um telemóvel recente, a diferença mal se nota. Para um robô, é outra história: se não executar o JavaScript, encontra uma página em branco.
Os quatro modos de renderização, explicados
CSR: renderização do lado do cliente
A página é construída pelo navegador. É o funcionamento por defeito de uma aplicação React ou Vue «simples». Ideal para uma área de cliente ou uma ferramenta por trás de um login, muito menos para páginas que quer ver no Google.
SSR: renderização do lado do servidor
O servidor constrói a página completa a cada visita e depois envia-a. O conteúdo é imediatamente legível por todos os robôs. Útil para páginas que mudam constantemente: stock, preços, disponibilidades.
SSG: geração estática
As páginas são fabricadas uma única vez, no momento da publicação, e depois servidas tal como estão. É o mais rápido e o mais robusto: nenhum cálculo a cada visita, um alojamento simples, uma segurança reforçada. Perfeito para um site institucional, um blog ou páginas de serviços.
ISR e renderização híbrida
Os frameworks modernos como o Next.js permitem misturar: páginas estáticas regeneradas automaticamente quando o conteúdo muda (ISR), páginas de servidor para o dinâmico e JavaScript do lado do cliente apenas onde há interação. É hoje a melhor abordagem para a maioria dos projetos.
O Google sabe ler JavaScript… com limites
O Google executa o JavaScript, mas em dois tempos: explora primeiro o HTML em bruto e depois coloca a página numa fila de espera para a «renderizar». Este atraso pode abrandar a indexação das suas novas páginas, e qualquer erro de JavaScript pode fazer desaparecer conteúdo. Os links gerados apenas em JavaScript, sem uma verdadeira etiqueta de link, são por vezes ignorados.
O impacto na velocidade
A renderização do lado do cliente obriga o telemóvel do visitante a descarregar e executar muito código antes de mostrar o que quer que seja. Resultado: uma primeira apresentação mais lenta e indicadores Core Web Vitals degradados. Uma página estática ou renderizada no servidor aparece quase instantaneamente.
Como verificar o seu site em dois minutos
- Abra o seu site, clique com o botão direito e escolha «Ver código-fonte da página».
- Procure (Ctrl+F ou Cmd+F) uma frase visível no ecrã, por exemplo o seu título principal.
- Se a frase estiver no código-fonte, o conteúdo é servido em HTML: é bom sinal.
- Se só vir uma estrutura vazia e scripts, o seu conteúdo depende do JavaScript.
- Para confirmar, use a ferramenta de inspeção de URL da Google Search Console e consulte a página tal como o Google a renderizou.
O que escolher para o seu projeto?
- Site institucional, blog, páginas de serviços: geração estática, com regeneração quando altera um conteúdo.
- Loja online: páginas de produto estáticas ou de servidor, carrinho e conta de cliente dinâmicos. É o princípio de uma loja Shopify headless.
- Área de cliente, back-office, ferramenta de gestão: a renderização do lado do cliente serve muito bem, uma vez que estas páginas não se destinam a estar no Google.
- Aplicação mobile: o tema é diferente, veja o nosso artigo aplicação mobile ou PWA.
A nossa abordagem
Na SOBO, desenvolvemos os nossos sites com Next.js privilegiando a geração estática: cada página chega completa ao visitante e aos robôs, e depois a interatividade é acrescentada onde é útil. É isso que nos permite entregar sites ao mesmo tempo rápidos, fáceis de posicionar e legíveis pelas IA. Se tiver dúvidas sobre o seu site atual, verificamo-lo gratuitamente na nossa auditoria, e podemos acompanhá-lo no seu redesign.