Astro 7.0: Como Estruturar Rotas Dinâmicas de Alto Desempenho para SEO

A velocidade de carregamento de uma página é um dos fatores mais determinantes para o ranqueamento no Google (Core Web Vitals). No desenvolvimento moderno, a criação de caminhos dinâmicos pode facilmente levar a gargalos se a estratégia de renderização correta não for escolhida. O Astro 7.0 traz refinamentos no roteamento que facilitam o equilíbrio entre conteúdo dinâmico e performance estática.

Neste artigo prático, demonstraremos como configurar rotas dinâmicas no Astro que carregam instantaneamente e atendem a todos os requisitos exigidos pelos robôs de busca (crawlers).

Quando Usar SSG vs. SSR em Rotas Dinâmicas?

O Astro permite alternar entre SSG (Static Site Generation) e SSR (Server-Side Rendering) de forma granular por arquivo. A escolha do método afeta diretamente o SEO:

• SSG (Geração Estática - Recomendado): Pré-renderiza todas as páginas no momento da compilação (build). É a opção ideal para blogs, portfólios e sites institucionais, pois entrega arquivos HTML puros e ultrarrápidos a partir de uma CDN. Para habilitar rotas dinâmicas em modo SSG, você deve exportar a função getStaticPaths().
• SSR (Renderização no Servidor): Gera a página sob demanda no servidor a cada requisição. Deve ser usada apenas quando os dados mudam em tempo real (como painéis de usuário ou e-commerces com estoque dinâmico).

// Exemplo de getStaticPaths em src/pages/posts/[slug].astro (Modo SSG)
export async function getStaticPaths() {
  const posts = await getCollection('blog');
  return posts.map((post) => ({
    params: { slug: post.slug },
    props: { post },
  }));
}

Como Evitar Erros Comuns de SEO no getStaticPaths

Ao gerar páginas estáticas dinamicamente, é fácil criar inconsistências que confundem os indexadores do Google. Siga estas diretrizes para manter seu SEO saudável:

1. Gere URLs Amigáveis (Clean URLs): Evite caracteres especiais, letras maiúsculas ou acentuações no parâmetro slug. Use slugs normalizados e curtos, focados na palavra-chave principal.
2. Mapeie Metadados Dinamicamente: Cada rota gerada precisa receber suas próprias tags <title> e meta <description> exclusivas a partir das propriedades (props) recebidas. Evite descrições genéricas repetidas em múltiplos slugs.
3. Evite Páginas Órfãs: Certifique-se de que todos os caminhos gerados pelo seu getStaticPaths estejam presentes no arquivo sitemap.xml do projeto. O plugin @astrojs/sitemap automatiza esse processo mapeando as rotas compiladas no build final.

Otimizando o Tempo de Resposta (TTFB) com Prédirecionamento de Links

O Astro traz suporte nativo a estratégias de pré-carregamento (prefetching). Ao adicionar a diretiva data-astro-prefetch em seus links de navegação, o Astro baixa preventivamente o HTML da página de destino assim que o usuário passa o cursor sobre o link.

Esta técnica faz com que a transição entre páginas pareça instantânea para o usuário, eliminando a latência percebida e melhorando as métricas de experiência do usuário na busca (UX Signals).