Como um app React de página única passou a ser lido pelo Google

O Negócios é um marketplace feito como app React de página única (SPA), com Vite e React Router. Para o usuário isso é ótimo, mas para quem rastreia o site é um problema: o HTML que chega é quase vazio e o conteúdo só aparece depois que o JavaScript roda. O Google até executa JavaScript, mas de forma mais lenta e menos confiável, e outros rastreadores e prévias de link (WhatsApp, LinkedIn) nem tentam.

O que precisava ser encontrado

A demanda do marketplace chega por buscas como “eletricista em Campinas” ou “contador em Curitiba”. Ou seja, o site precisa ter uma página para cada combinação de categoria e cidade, além de perfis de empresas e artigos do blog, e cada uma precisa entregar texto real no primeiro HTML.

Passo 1: um sitemap feito com dados reais

As rotas indexáveis não estão escritas em nenhum arquivo: elas vêm da API (categorias, cidades, perfis e posts). Por isso o sitemap é gerado no build, consultando a API e listando categorias, categoria + cidade, perfis e blog. Assim, uma empresa publicada aparece no sitemap sem que ninguém edite um arquivo.

Passo 2: prerender com um navegador de verdade

Depois do build do Vite, um passo extra abre cada rota num Chromium headless, espera a página terminar de renderizar e grava o HTML já pronto. Esse HTML gravado é o que o rastreador recebe ao pedir aquela rota, já com títulos, textos e links de verdade, mesmo sem executar JavaScript.

// Exemplo simplificado da ideia (não é o código do projeto)
const browser = await chromium.launch();
const page = await browser.newPage();

for (const route of routes) {
  await page.goto(`${origin}${route}`, { waitUntil: "networkidle" });
  const html = await page.content();
  await writeFile(outputPathFor(route), html);
}

await browser.close();

Por que prerender, e não renderização no servidor?

Migrar para um framework com renderização no servidor, como o Next.js, seria a resposta mais comum, e para um projeto novo pode ser a melhor. O Negócios, porém, é uma SPA com várias áreas (cliente, empresa, admin, chat) que também é empacotada como app Android com Capacitor. Prerenderizar as rotas públicas entrega o ganho de SEO sem reescrever o front-end e sem abrir mão do app.

Limites dessa abordagem

• O HTML é uma foto do momento do build: conteúdo novo só aparece no HTML depois de um novo build (ou de um passo de prerender incremental).
• O tempo de build cresce com o número de rotas, já que cada uma abre uma página no navegador.
• Rotas privadas (painéis e chat) ficam de fora de propósito: continuam sendo SPA.

Para conteúdo que muda ao longo do dia, vale pensar em regenerar só as rotas afetadas. Já o build completo é simples de operar e resolve o problema central: entregar texto real a quem rastreia.