Desempenho e velocidade5 min de leitura

SSR, SSG ou ISR: escolha pela atualização, pelo cache e pelas necessidades do usuário

Compare estratégias de renderização por atualização do conteúdo, personalização e comportamento em falhas, e depois faça benchmarks com a sua própria carga de trabalho.

Três caminhos de renderização: na requisição, no build e por revalidação

A resposta curta

O SSG serve para conteúdo que pode ser gerado com antecedência; o SSR renderiza para cada requisição; o ISR pode reutilizar uma página gerada enquanto a atualiza. Escolha por rota com base na defasagem aceitável, nas permissões e no suporte operacional, e depois meça a experiência completa.

Não existe uma arquitetura mais rápida para tudo

Uma resposta em cache perto do visitante pode ser rápida independentemente de como o HTML foi gerado originalmente. Uma página renderizada no servidor com consultas eficientes pode superar uma página estática que envia JavaScript demais. TTFB, atualização do conteúdo e capacidade de resposta são propriedades diferentes.

Esta comparação é um modelo de decisão, não um benchmark de sistemas de clientes. A versão do framework, o runtime, o adaptador de hospedagem, a configuração de cache, a geografia e o acesso aos dados afetam os resultados.

Compare o trabalho que cada abordagem executa

Opções de renderização e seus compromissos operacionais
Abordagem Quando o HTML é produzido Bom uso inicial O que verificar com cuidado
SSR Durante uma requisição, sujeito ao cache Páginas autenticadas ou específicas de cada requisição Trabalho na origem, timeouts e limites do cache privado
SSG Antes da visita, normalmente durante um build Páginas editoriais e de documentação estáveis Duração do build e atraso na publicação
ISR Saída gerada que é reutilizada e atualizada Conteúdo público com defasagem limitada Invalidação, falha de regeneração e primeira visita sem cache

Use SSR quando a requisição muda a resposta

Páginas de conta e telas que dependem de permissões costumam exigir decisões no momento da requisição. Mantenha a autenticação e a autorização no servidor e impeça o cache compartilhado de respostas privadas. Streaming, cache de dados e um desenho cuidadoso das consultas podem reduzir a espera, mas não eliminam a necessidade de medir.

SSR não implica um custo de infraestrutura específico nem um tamanho de cluster obrigatório. A carga, o trabalho de cada resposta e a estratégia de escalabilidade determinam esses requisitos.

Use SSG quando a publicação pode acontecer antes das visitas

O HTML pré-gerado pode ser servido por uma hospedagem estática comum ou por uma CDN. É um ótimo ponto de partida para conteúdo que muda de forma previsível. Verifique quanto tempo leva um build realista e como os editores veem os rascunhos antes da publicação.

Nem todo sistema estático gera novamente todas as páginas a cada edição; o comportamento do build incremental depende da ferramenta. Teste o processamento de imagens, a busca de conteúdo e o tempo de deploy, além da renderização das páginas.

Use ISR quando uma defasagem limitada for aceitável

O ISR combina a saída gerada com a regeneração. No Pages Router do Next.js, um intervalo de revalidação permite que uma requisição posterior dispare a atualização depois que o intervalo passou; não é um timer que garante conteúdo novo em um segundo exato. A saída em cache pode continuar visível enquanto a regeneração acontece.

Valide o comportamento das primeiras visitas, das regenerações com falha e da invalidação sob demanda na sua plataforma de hospedagem real. Os nomes das APIs e o suporte variam conforme o router e a versão do framework. Não presuma que um runtime edge oferece os mesmos recursos de regeneração que um deploy em Node.js.

Descrições públicas de produtos costumam tolerar alguma defasagem, mas o preço, o estoque e a decisão de pagamento definitivos devem ser verificados no fluxo da transação. Nunca deixe uma página antiga em cache virar a única fonte da verdade de uma compra.

Faça uma comparação que possa ser reproduzida

  1. Use o mesmo conteúdo, as mesmas imagens e um comportamento de interação equivalente em todas as implementações.
  2. Registre a versão do framework, o runtime, a região do servidor, a CDN, a região do banco de dados e a política de cache.
  3. Teste separadamente as requisições a frio e a quente, incluindo a regeneração e a falha da origem.
  4. Meça a partir de vários locais e com cargas concorrentes realistas; registre o número de amostras e a distribuição da latência.
  5. Compare LCP, bytes transferidos e traces de interação, além do TTFB.
  6. Teste publicação, despublicação, mudanças de permissão e rollback com a equipe que vai manter o site.

Perguntas frequentes

É possível combinar estratégias?

Sim. Um blog, um catálogo de produtos e um painel privado podem ter necessidades diferentes de renderização e de cache. Defina esses limites de forma explícita e mantenha o número de modos operacionais pequeno o bastante para que a sua equipe consiga testá-los.

Qual estratégia de renderização é melhor para o blog de uma empresa?

HTML público pré-gerado ou em cache costuma ser um bom ponto de partida quando o conteúdo muda de forma previsível. A escolha certa também depende da pré-visualização, do atraso de publicação, das integrações e da manutenção. Faça o benchmark da página completa, incluindo imagens e trabalho de interação, e não apenas do primeiro byte da resposta.

Um intervalo de revalidação do ISR garante uma atualização imediata?

Não. O comportamento depende do framework e do deploy. No modelo do Pages Router do Next.js descrito acima, uma requisição posterior pode disparar a regeneração depois do intervalo, enquanto uma resposta gerada anteriormente pode continuar disponível. Teste atualizações com falha, primeiras visitas sem cache e invalidação sob demanda.

Páginas de conta privadas podem usar o mesmo cache compartilhado de um artigo público?

Respostas privadas ou que dependem de permissões precisam de limites bem definidos e não podem vazar por um cache público compartilhado. Estabeleça a autorização antes de retornar informações protegidas. Páginas editoriais públicas e páginas de conta autenticadas podem usar políticas de renderização e de cache diferentes.

Fontes e leituras recomendadas

Continue explorando

Compare o WordPress headless e o tradicional e depois use o fluxo de medição de desempenho.

Paul Edward

Escrito por Paul Edward

Desenvolvedor web full-stack sênior que trabalha com PHP, Laravel, WordPress e sistemas web com IA.

Mais sobre o Paul

Leave a Reply

Your email address will not be published. Required fields are marked *

Carregando uma verificação rápida… (requer JavaScript)

Continue lendo

Briefing do projeto Etapa 1 de 2 · O trabalho

O que você quer construir?

Um parágrafo já basta para começar. Se não for um trabalho para mim, eu digo e indico alguém melhor.

O trabalho

Marque tudo o que se aplica.

Plataforma

“Não sei” é uma resposta perfeitamente válida.

O que você quer construir, e o que isso precisa fazer pelas pessoas que vão usar? Escreva do jeito que você diria em voz alta.

0 / 1200

Duas etapas. Menos de um minuto.