Next.js e React para IA: deixar os frameworks JavaScript visíveis para os rastreadores de IA
React, Next.js e frameworks parecidos são excelentes — mas podem produzir uma página que parece perfeita para uma pessoa e está completamente em branco para um rastreador de IA. A diferença se resume a onde o seu conteúdo é renderizado. Este guia explica a única pergunta que decide isso e como cair do lado certo.
A única pergunta que decide tudo
Quando um rastreador de IA (GPTBot, ClaudeBot, PerplexityBot, Google-Extended) busca a sua página, ele lê o HTML que o seu servidor devolve. Ele normalmente não executa JavaScript como um navegador faz. Então a única pergunta que importa é:
O seu texto já está no HTML que o servidor envia — ou só aparece depois que o JavaScript roda no navegador?
Se o seu conteúdo principal é montado no navegador, o rastreador vê uma casca quase vazia. → JavaScript e os rastreadores de IA
Next.js: normalmente bem, se você deixar renderizar no servidor
O Next.js pode ser muito amigável para IA, porque foi feito para renderizar no servidor:
- App Router (Server Components) renderiza os seus componentes em HTML no servidor por padrão. O seu texto vai parar no HTML inicial — bom.
- Pages Router funciona bem quando você carrega o seu conteúdo principal com
getServerSideProps(SSR) ougetStaticProps(geração estática). Esses dados são embutidos no HTML.
A armadilha são os dados que você busca só no navegador — por exemplo dentro de um useEffect, ou com uma biblioteca de dados do lado do cliente, em que a página chega vazia e se preenche após carregar. Um componente "use client" é ok para interatividade, mas se as palavras que importam só chegam depois de uma requisição do navegador, elas não estão no HTML que o rastreador lê. Coloque o seu conteúdo principal no caminho do servidor.
SPA de React puro: o caso difícil
Um app React só de cliente (Create React App, ou Vite sem renderização no servidor) costuma enviar um <div id="root"></div> vazio e desenhar tudo no navegador. Para uma pessoa é uma página completa; para um rastreador de IA está em branco. As suas opções:
- Migre para um framework que renderiza no servidor — Next.js, Remix ou Astro.
- Adicione pré-renderização estática para as suas rotas de conteúdo, para que os rastreadores recebam HTML de verdade.
Não esqueça os metadados e os dados estruturados
Renderizar o texto no servidor é a maior parte da batalha, mas termine o trabalho:
- Título, descrição, canonical, Open Graph — use a Metadata API do Next.js (App Router) ou
next/head(Pages Router) para que estejam no HTML do servidor e não sejam definidos depois por JavaScript. - Dados estruturados — emita um
<script type="application/ld+json">renderizado no servidor para que a IA receba fatos explícitos. → dados estruturados · sitemaps e canonical
A parte honesta
Você não precisa abandonar o React. Hidratação e interatividade rica são perfeitamente ok — a IA lê o HTML inicial, e o seu app pode continuar tão dinâmico quanto você quiser por cima disso. A solução não é «usar menos JavaScript», e sim «garantir que a primeira resposta HTML já contenha as suas palavras». Renderização no servidor, geração estática e React Server Components todos conseguem isso.
Como verificar
Abra «Exibir código-fonte» (não o inspetor — ele mostra o DOM ao vivo depois do JS) ou rode curl https://seusite.com.br e procure o texto real dos seus parágrafos. Se você vê o seu título e o corpo do texto, os rastreadores também veem. Se você vê um <div id="root"> vazio e um monte de tags de script, o seu conteúdo é só de navegador. Ou passe a sua URL por uma verificação gratuita de visibilidade para IA e confirme de relance.
Em resumo
React e Next.js não são o inimigo — a renderização só no navegador é. Mantenha o seu conteúdo principal no servidor (SSR, SSG ou Server Components), coloque os metadados e os dados estruturados no HTML do servidor e verifique com «Exibir código-fonte». Comece pela introdução ao GEO e JavaScript e os rastreadores de IA, e se a IA ainda não citar você, veja por que meu site não aparece na IA.