Tempo de leitura: 11 minutos
SEO em React é fazer cada página do app chegar ao robô com texto, links e metadados já no HTML. Numa SPA em React criada com o Vite, o SEO sofre, porque o servidor entrega só uma casca e o conteúdo surge depois do JavaScript. A correção vem de SSR, pré-renderização ou um framework como o Next.js.
Em resumo
- O React não atrapalha o SEO, mas a SPA padrão responde a toda URL com o mesmo HTML quase vazio.
- O Googlebot executa JavaScript, mas, num estudo de 2024, os robôs da OpenAI, da Anthropic e do Perplexity leram só o HTML inicial.
- Em geral, pré-renderizar as páginas públicas no build com o React Router resolve o SEO sem trocar de stack.
- No guia oficial, a migração de um app React do Vite para o Next.js começa como SPA, por isso não muda o SEO de imediato.
React é ruim para SEO?
Não. O React gera HTML no servidor, no build ou no navegador, e quem decide é a arquitetura do site. O risco, porém, está na SPA padrão. De acordo com a documentação do React, ferramentas como Vite, Parcel e Rsbuild começam com uma SPA só no cliente. O SSR fica por sua conta.
O risco vem de um detalhe: numa SPA, todas as rotas usam o mesmo arquivo HTML. No modelo React do Vite, por exemplo, o SEO passa a depender do JavaScript. O index.html traz um title fixo, com o nome do projeto, e um <div> vazio:
<!-- trecho do index.html de um app criado com o modelo react-ts do Vite -->
<head>
<title>meu-app</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>Para o Google, isso costuma significar atraso, e não bloqueio, porque o Googlebot executa o JavaScript antes de indexar. Ainda assim, o Google diz que a renderização prévia ou no servidor continua sendo uma ótima ideia, já que nem todos os bots executam JavaScript.
Os robôs de IA, no entanto, preocupam mais. No estudo da Vercel com a MERJ, de 2024, nenhum grande robô de IA testado executou JavaScript, inclusive os da OpenAI, da Anthropic e do Perplexity. Já o Gemini renderizou as páginas, porque usa a estrutura do Googlebot. A Vercel, que mantém o Next.js, vende hospedagem.
Em 30 de setembro de 2026, porém, o dono de um site em Next.js publicou um relato na DEV Community. Nos sites dele, o OAI-SearchBot e o GPTBot passaram a renderizar as páginas. Ele não achou anúncio da OpenAI, e a mudança segue sem confirmação.
Por isso, o SEO de uma SPA em React pode ir bem no Google e falhar nas respostas de IA. O guia de como aparecer no Gemini, no Perplexity e no Claude mostra que robôs liberar em cada um desses assistentes.
SSR, SSG ou CSR: o que muda no SEO em React?
Muda o momento em que o HTML recebe o conteúdo. No CSR, isso acontece no navegador, enquanto no SSR acontece no servidor, a cada pedido. No SSG, o HTML nasce durante o build. Assim, um robô que não executa JavaScript recebe a página completa em SSR e SSG, mas só a casca em CSR.
Para o SEO em React, portanto, vale ver o que cada configuração entrega na primeira resposta. A comparação completa, com ISR e streaming, está no guia sobre o que o Googlebot e os robôs de IA enxergam em SSR e CSR.
| Configuração | Modo | O que vai no HTML inicial |
|---|---|---|
| Modelo React do Vite | CSR | Casca com <div id="root"> vazio |
Modo SPA do React Router (ssr: false) | CSR, com a raiz gerada no build | Só o layout da rota raiz |
prerender do React Router | SSG | Página completa das URLs listadas |
SSR do React Router (ssr: true) | SSR | Página completa a cada pedido |
| App Router do Next.js | SSG ou SSR, por rota | HTML da página, por padrão |
output: 'export' do Next.js | SSG | Um HTML por rota |
Por baixo, esses frameworks usam APIs do próprio React. Conforme a referência do React, a função prerender gera HTML estático e espera todos os dados carregarem antes de terminar. Em geral, porém, quem chama essas APIs é o framework, e não o código do site. A tabela e os exemplos seguem a documentação do React 19, do Vite 8, do React Router 8 e do Next.js 16.
Vale migrar uma SPA em React para Next.js por causa do SEO?
Vale, sobretudo, quando o site tem muitas páginas públicas e o time pode reescrever rotas e busca de dados. Por outro lado, se o app já usa o React Router, o modo framework resolve o SEO com menos mudança. Nos dois casos, porém, o ganho de SEO só aparece quando as páginas públicas do app React deixam de ser SPA.
A documentação do React recomenda começar apps novos com um framework, como o Next.js ou o React Router. Além disso, todos os frameworks recomendados ali geram SPA e páginas estáticas sem servidor e permitem ligar o SSR rota por rota.
Na prática, a escolha segue a situação do site:
- SPA com React Router e páginas públicas estáveis: adote o modo framework com
prerender, porque ele mantém os componentes e gera HTML no build. - Catálogo ou notícias que mudam o dia todo: use SSR no React Router ou no Next.js, já que o HTML sai atualizado a cada pedido.
- Reescrita já planejada: prefira o Next.js com App Router, pois ele traz Server Components e a Metadata API.
- Só área logada: mantenha a SPA, uma vez que os robôs não precisam dessas telas.
Para a equipe do React, a renderização no servidor ajuda além do SEO:
“Um equívoco comum é achar que a renderização no servidor serve só para SEO. Ela pode melhorar o SEO, mas também melhora o desempenho, porque reduz o JavaScript que o usuário precisa baixar e processar antes de ver o conteúdo na tela.” (tradução nossa)
Matt Carroll e Ricky Hanlon, no blog oficial do React (2025)
Pelo Next.js, a migração começa como SPA
Para o SEO de um app React vindo do Vite, o guia oficial de migração para o Next.js tem uma pegadinha. Isso porque ele começa mantendo o app como SPA, sem trocar o roteador, e tira o componente principal da pré-renderização. De fato, no fim do roteiro, o próprio guia avisa que o app ainda não aproveita a maior parte dos benefícios do Next.js.
Para o robô, portanto, nada muda até as rotas irem para o App Router. Lá, páginas e layouts são Server Components por padrão, e a Metadata API gera as tags do <head> no servidor. Em seguida, metadados e streaming pedem cuidados próprios de SEO no Next.js.
Pelo React Router: SEO sem sair do Vite
Quem já usa o React Router pode adotar o modo framework e resolver o SEO sem sair do Vite. O guia de adoção troca o plugin React do Vite pelo plugin do React Router e começa com ssr: false, ou seja, ainda como SPA. A etapa mais longa é passar as rotas para módulos. Em seguida, liste as páginas públicas no prerender, e o build gera um HTML para cada uma:
// react-router.config.ts
import type { Config } from "@react-router/dev/config";
export default {
ssr: false, // sem servidor: o build gera arquivos estáticos
prerender: ["/", "/precos", "/blog"], // URLs com HTML pronto
} satisfies Config;As outras URLs continuam na SPA, que o build grava num arquivo de fallback. Com um servidor, porém, o ssr: true liga o SSR nas rotas que ficaram fora do prerender. No React Router 7, a mesma configuração vale desde a versão 7.2.
Pré-renderização resolve para os robôs de IA?
Resolve, desde que a pré-renderização aconteça no build e entregue o mesmo HTML a todas as visitas. Para um robô que lê só a primeira resposta, essa página equivale a uma página em SSR. Os limites, porém, estão no que fica fora do build e no que muda depois dele.
- Dados buscados no navegador: no
prerenderdo React, só entram dados que ativam o Suspense. Por isso, ficam de fora os dados buscados num Effect, padrão comum em SPAs, como avisa a referência do React. No React Router, em contrapartida, osloaderdas rotas rodam no build e levam os dados ao HTML. - Rotas dinâmicas: com
prerender: true, o React Router gera só os caminhos fixos e deixa de fora URLs como/blog/:slug. Então, liste os slugs no config, como mostra o guia de pré-renderização. - Conteúdo que muda: preço, estoque e notícias envelhecem entre um build e outro. Nesses casos, refaça o build a cada publicação ou use SSR.
Para o SEO de um site em React, a pré-renderização no build é a opção mais previsível, porque entrega o mesmo HTML a todos. Ela também não depende de lista de robôs.
E a pré-renderização como serviço?
A pré-renderização como serviço, no entanto, funciona de outro jeito. Um servidor reconhece o robô, por exemplo pelo user agent, e entrega a ele uma cópia renderizada, enquanto as pessoas recebem a SPA. O Google chama isso de renderização dinâmica e a trata como alternativa provisória. Além disso, a técnica só ajuda os robôs que estiverem na lista do serviço.
É o caso, por exemplo, dos sites antigos do Lovable, em React e Vite: na hospedagem do próprio Lovable, a cópia vai só para robôs verificados. Custo e configuração da pré-renderização como serviço dependem do fornecedor e do tamanho do site.
Como testar o SEO em React depois da mudança?
Compare a primeira resposta do servidor com a página que o navegador monta, rota por rota. Assim que o deploy terminar, cada URL pública precisa trazer no HTML o texto principal, um title próprio e links com href. Depois, faça o teste com o user agent de um robô de IA e confira o Search Console.
O comando abaixo baixa a página com o user agent que a OpenAI publica para o OAI-SearchBot, o robô da busca do ChatGPT. A OpenAI avisa que a versão no user agent pode mudar. O comando mostra o status, o title e em quantas linhas do HTML aparecem uma frase do texto e a casca vazia. No Windows, rode no Git Bash.
URL="https://www.exemplo.com.br/precos/"
UA="Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36; compatible; OAI-SearchBot/1.4; +https://openai.com/searchbot"
curl -sL -A "$UA" -o pagina.html -w "status: %{http_code}\n" "$URL"
grep -o "<title[^>]*>[^<]*</title>" pagina.html
grep -c "uma frase do texto principal" pagina.html
grep -c '<div id="root"></div>' pagina.htmlComo ler o resultado do teste?
No SEO em React, repita o teste em três tipos de rota: a home, uma página de conteúdo e uma rota dinâmica. Leia o resultado assim:
- Frase com 0 e casca com 1: a rota ainda é CSR, então confira se ela está no
prerendere se o deploy publicou a saída nova. - O mesmo title em todas as rotas: o title de cada rota ainda nasce no navegador, e um robô sem JavaScript vê só o title padrão.
- Status 200 numa URL que não existe: o fallback da SPA responde a tudo, e o Google pode tratar a página como soft 404. Por isso, o servidor deve devolver 404.
O curl sai do seu IP, então não reproduz bloqueios por IP no firewall. Ele também não recebe a cópia que um serviço de pré-renderização entrega só a robôs verificados. Para o Google, por outro lado, a Inspeção de URL do Search Console mostra como ele processou a página. O roteiro completo, com logs e sintomas, está no checklist de JavaScript SEO. Esse teste é uma parte da auditoria técnica de SEO.
Por fim, a renderização é só a base técnica do SEO que sustenta a visibilidade da marca no Google e na IA.
Perguntas frequentes
Nem sempre. Desde o React 19, qualquer componente pode renderizar <title> e <meta>, e o React leva essas tags para o <head>. Numa SPA, porém, isso acontece no navegador, e um robô sem JavaScript vê o title do index.html. Ainda assim, bibliotecas de metadados ajudam a trocar tags por rota.
Não por padrão. O modelo React do Vite gera uma SPA só com renderização no cliente, o caso mais difícil para o SEO. O Vite tem uma API de SSR, mas a documentação dele a descreve como de baixo nível, feita para autores de bibliotecas e frameworks. Por isso, para um app, o caminho mais curto é um framework que usa o Vite, como o React Router.
Não. Em fevereiro de 2025, a equipe do React descontinuou o Create React App para apps novos. No lugar dele, a equipe indica um framework ou uma ferramenta de build, como o Vite. Para apps que já usam o CRA, os guias de migração citados pela equipe levam primeiro a uma SPA só no cliente. Portanto, o ganho de SEO vem depois, rota por rota.
Quer saber como sua marca aparece hoje nas respostas de IA?
A NotHuman está abrindo vagas para agências e marcas acompanharem como aparecem nas respostas de IA. Entre na lista de espera e avisamos quando houver uma vaga para você.
Fontes principais
- React, Creating a React App, com os frameworks recomendados (2026).
- React, Build a React App from Scratch, sobre SPA, SSR e SSG em ferramentas de build (2026).
- React, referência da função prerender, de react-dom/static (2026).
- React, Sunsetting Create React App (2025).
- React Router, Pre-Rendering, com as opções ssr e prerender (2026).
- Vite, Server-Side Rendering, com a seção de pré-renderização (2026).
- Next.js, How to migrate from Vite to Next.js (2026).
- Vercel, The rise of the AI crawler, estudo com a MERJ (2024).
