1. Introdução Teórica
Quando um usuário clica em um link tradicional na web, o navegador executa um 'full-page refresh' (recarregamento total). O documento em memória é destruído, a tela pisca em branco, e o novo HTML é processado do zero. Esse pequeno atraso de 1 a 3 segundos gera o que chamamos de fricção cognitiva. O usuário sente que está em um site lento e estático.
Para resolver isso, a indústria adotou SPAs (Single Page Applications) em frameworks pesados como React e Next.js. Porém, essas ferramentas criam novos problemas: carregam centenas de kilobytes de JS que degradam o desempenho mobile e bloqueiam rastreadores orgânicos que leem HTML puro.
2. A View Transitions API
A moderna View Transitions API nativa dos navegadores resolve esse dilema técnico de forma brilhante. Ela permite interceptar a navegação via Javascript e aplicar uma transição visual ultra-suave acelerada por GPU diretamente entre as telas (um morphing perfeito), sem reloads e com a velocidade extrema de um aplicativo móvel nativo.
Nosso roteador Vanilla SPA implementa isso de fábrica em apenas 100 linhas de código no script `main.js`. O fetch puxa o novo arquivo HTML em segundo plano, substitui os nós em memória, e a API cuida da fusão visual elegante entre os dois layouts.
3. Por que o SEO fica intacto?
Esta é a maior vantagem comercial do roteamento SPA Vanilla: Indexabilidade Nativa. Como não usamos um servidor Node compilando JavaScript para renderizar a tela, cada página do seu site (index.html, sobre.html, servicos.html) existe como um arquivo físico estático e autônomo.
Robôs de buscas do Google e rastreadores generativos de inteligência artificial (ClaudeBot, GPTBot) conseguem ler o HTML e as tags de dados estruturados JSON-LD imediatamente. O roteador SPA Vanilla entra apenas como um acelerador progressivo de experiência para o usuário humano, garantindo o melhor de dois mundos: visibilidade orgânica total e diversão de aplicativo.
4. Conclusão Prática
Adotar códigos limpos, sem excesso de dependências, é o caminho ideal para deploys de alto padrão. O template-landing demonstra na prática como obter notas 100/100 em velocidade mantendo estética sofisticada e didática de conversão rica direto no código.