Guias

Uma single-page application, ou SPA, é um site que carrega um único documento HTML uma vez e depois atualiza o conteúdo no navegador à medida que interage, em vez de ir buscar uma página totalmente nova ao servidor a cada clique. A «página única» é literal: o navegador nunca faz um recarregamento completo durante o uso normal. Tudo depois desse primeiro carregamento é tratado por JavaScript que reescreve a página atual.

Dos sites multipágina à página única

Para apreciar por que existem as SPA, ajuda recordar o modelo tradicional contra o qual reagiram. Num site multipágina clássico, cada ligação ou submissão de formulário pede ao servidor um novo documento HTML completo, que o navegador depois carrega de raiz — cabeçalho, rodapé e tudo. É simples e robusto, mas cada navegação envolve um recarregamento visível e uma ida e volta ao servidor, o que pode parecer lento e desconexo.

Uma SPA inverte isto. O servidor envia uma shell HTML e um bundle de JavaScript na primeira visita; a partir daí, navegar para uma nova «página» corre código no navegador que troca a parte relevante da interface e vai buscar apenas os dados de que precisa, normalmente como JSON de uma API. Como não há recarregamento completo, as transições podem ser instantâneas e a experiência aproxima-se de uma aplicação de desktop ou móvel.

As frameworks e o atrativo das SPA

Este é precisamente o território das frameworks de front-end. O React, o Vue, o Svelte e o Angular existem em grande parte para tornar gerível a construção de SPA, fornecendo os componentes, a gestão de estado e o routing do lado do cliente que trocam vistas sem recarregar. Quando ouve que um site é «construído com React» ou «construído com Vue», é muitas vezes uma SPA — a framework é o que torna o modelo de página única prático de construir e manter.

• SPA: carrega uma shell HTML, depois atualiza o conteúdo no navegador via JS
• Construída com frameworks como React, Vue, Svelte ou Angular
• Prós: navegação rápida e semelhante a uma aplicação após o primeiro carregamento
• Contras: primeiro carregamento mais pesado; cuidado com SEO, acessibilidade, routing
• O SSR (Next.js, Nuxt) dá um primeiro paint rápido mais navegação SPA

O atrativo é uma experiência genuinamente mais suave. Assim que o bundle inicial carrega, as interações são rápidas porque a aplicação apenas pede dados em vez de documentos inteiros, e a interface pode atualizar-se de forma fluida sem a cintilação de um recarregamento. Para produtos altamente interativos — dashboards, editores, aplicações web que se comportam como software — essa capacidade de resposta é uma vantagem real e duradoura sobre o modelo multipágina.

Os compromissos, com honestidade

Mas o modelo SPA acarreta compromissos honestos que tem de contornar pelo desenho em vez de ignorar. O primeiro carregamento é mais pesado, porque o navegador tem de descarregar e executar um bundle de JavaScript antes de mostrar conteúdo significativo, o que pode prejudicar a experiência em ligações lentas ou dispositivos modestos. Se esse bundle crescer sem controlo, a própria velocidade que a SPA prometeu pode transformar-se num ecrã inicial lento e em branco.

A pesquisa e a acessibilidade merecem cuidado particular. Como grande parte do conteúdo é renderizado por JavaScript após o carregamento, os motores de pesquisa e as ferramentas que não executam scripts podem ver uma shell vazia, a menos que tome medidas deliberadas. O routing do lado do cliente também tem de ser implementado com cuidado para que o botão recuar do navegador, os deep links e o histórico se comportem como os utilizadores esperam, em vez de falharem de formas subtis.

A renderização no servidor em socorro

A resposta da indústria a estes compromissos é a renderização no servidor e os seus parentes. Meta-frameworks como o Next.js para React e o Nuxt para Vue renderizam a página inicial no servidor para que o utilizador — e os motores de pesquisa — obtenham conteúdo real imediatamente, e depois «hidratam»-na numa SPA completa no navegador. Este híbrido mantém o primeiro paint rápido dos sites tradicionais e a navegação suave de uma SPA, razão pela qual tantas aplicações modernas o adotam.

Escolher a SPA com conhecimento de causa

Nada disto torna a SPA universalmente certa ou errada. Um site de conteúdos feito sobretudo de artigos pode ser mais bem servido por uma abordagem tradicional ou estática, ao passo que uma aplicação ricamente interativa beneficia enormemente do modelo SPA. A perícia está em escolher deliberadamente, sabendo que «página única» lhe compra interatividade fluida em troca de um primeiro carregamento mais pesado e de mais responsabilidade pela pesquisa e pela acessibilidade.

Entendida assim, a single-page application não é uma palavra da moda mas uma escolha arquitetural específica com forças claras e custos claros. Carrega uma vez, corre no navegador e parece uma aplicação — e quando a combina com renderização no servidor, pode ter grande parte desse benefício sem pagar o preço completo. Conhecer os compromissos é o que lhe permite recorrer a ela no momento certo.