O que é uma Single-Page Application? Um documento, muitas views
Uma single-page application (SPA) carrega um único documento HTML e depois usa JavaScript para trocar views e buscar dados sem recarregamentos completos de página.
Sites tradicionais solicitam um novo documento HTML para cada página. Uma SPA carrega uma vez e depois lida com a navegação no navegador, reescrevendo a view com JavaScript e buscando dados de APIs. Isso parece um app e é rápido após o carregamento, mas empurra o trabalho para o cliente e muda como o roteamento e a hospedagem precisam ser configurados.
Como uma SPA navega
O app intercepta cliques em links e atualiza a URL com a History API em vez de deixar o navegador solicitar uma nova página. Um router do cliente mapeia a URL para um componente e o renderiza, então a navegação nunca recarrega o documento.
A pegadinha do roteamento
Como o servidor realmente só tem um arquivo HTML, os deep links precisam ser tratados. A hospedagem precisa de uma regra catch-all que retorne o app shell para qualquer caminho, deixando o router do cliente assumir. A falta disso é uma causa clássica de 404s ao atualizar a página.
Pontos fortes e fracos
- Navegação suave, semelhante a um app, após o primeiro carregamento.
- Download inicial de JavaScript maior e primeiro paint mais lento.
- O SEO exige trabalho extra, já que o conteúdo é renderizado no cliente.
SPA vs SSR
Uma SPA pura renderiza inteiramente no navegador. O SSR renderiza a primeira view no servidor para um primeiro paint mais rápido e melhor SEO, e depois hidrata em uma experiência semelhante a uma SPA. Muitos frameworks agora combinam os dois.
SPAs em CI/CD
Um build de SPA produz arquivos estáticos, então o CI faz o build e o upload deles para um CDN como qualquer site estático, com um rewrite de host que serve o shell para todas as rotas. Como tudo é estático, os deploys são simples, mas a pipeline deve incluir uma verificação de tamanho do bundle, já que os payloads de SPA tendem a crescer.
Principais conclusões
- Uma SPA carrega uma vez e atualiza as views com JavaScript, evitando recarregamentos completos.
- A hospedagem precisa de um rewrite catch-all para que deep links retornem o app shell.
- O CI faz o deploy da saída estática em um CDN; fique de olho no tamanho do bundle na pipeline.