Um aplicativo de página única (do inglês "single-page application", abreviado SPA) é uma aplicação web ou site que consiste de uma única página web com o objetivo de fornecer uma experiência do usuário similar à de um aplicativo desktop. Em um SPA, todo o código necessário - HTML, JavaScript, e CSS – ou é obtido com um único carregamento de página, ou os recursos apropriados são carregados dinamicamente e adicionados à página conforme necessário, geralmente em resposta a ações do usuário. A página não é recarregada em qualquer momento do processo, tampouco ocorre a transferência de controle para outra página, embora a URL no navegador ou a API de história do HTML5 possam ser usadas para fornecer a percepção e navegabilidade de páginas separadas ao aplicativo. Interação com aplicativos de página única muitas vezes envolve comunicação dinâmica com o servidor web por trás dos bastidores.
Existem diversas técnicas que permitem o navegador manter uma única página mesmo quando o site/aplicativo requer atualização de dados vindo da comunicação com o servidor.
Frameworks JavaScript para aplicações web, como o React e o Vue, geralmente aprimoram recursos disponíveis por meio de tecnologias web nativas, como roteamento, desenvolvimento baseado em componentes e gerenciamento de estado, capacidade de aumentar a produtividade do desenvolvedor, padrões estruturados para aplicações de grande escala, simplificar o tratamento de casos extremos e, ferramentas para otimização de desempenho como camadas de abstração, renderização simultânea, tree-shaking e, hidratação seletiva. Embora os padrões web nativos tenham avançado significativamente, incluindo Web Components, API JavaScript modernas como Fetch e ES Modules, e recursos do navegador como Shadow DOM.
Embora esses avanços melhorem a eficiência da renderização e o gerenciamento de recursos, seus benefícios dependem da aplicação específica e do contexto de implementação. Frameworks leves, como Svelte e Preact, adotam abordagens arquitetônicas diferentes; o Svelte elimina completamente o DOM virtual, optando por compilar componentes em código JavaScript eficiente, enquanto o Preact oferece uma alternativa minimalista e compatível com o React. A escolha da estrutura depende dos requisitos de uma aplicação, incluindo a experiência da equipe, metas de desempenho e prioridades de desenvolvimento.
Uma categoria mais recente de frameworks web, incluindo enhance.dev, Astro e Fresh, aproveita padrões web nativos enquanto minimiza abstrações e o uso de ferramentas de desenvolvimento. Essas soluções enfatizam o aprimoramento progressivo, a renderização no servidor e a otimização de desempenho, por padrão o Astro renderiza HTML estático, enquanto apenas as partes interativas são atualizadas, ja o Fresh se concentra na renderização do lado do servidor com sobrecarga de tempo de execução zero. O Enhance.dev prioriza padrões de aprimoramento progressivo usando Web Components. Embora essas ferramentas reduzam a dependência do JavaScript do lado do cliente, transferindo a lógica para o tempo de compilação ou para a execução no servidor, elas ainda usam JavaScript quando necessário para a interatividade. Essa abordagem os torna particularmente adequados para aplicações críticas de desempenho e focadas em conteúdo.
Meteor.js é um framework JavaScript full-stack (cliente-servidor) projetado exclusivamente para SPAs, que apresenta vinculação de dados mais simples do que Angular, Ember e, ReactJS, usando o Protocolo de Dados Distribuídos, e um padrão de publicação-assinatura para propagar automaticamente as alterações de dados aos clientes em tempo real, sem exigir que o desenvolvedor escreva qualquer código de sincronização. A reatividade de pilha completa garante que todas as camadas, do banco de dados aos modelos, se atualizem automaticamente quando necessário. Pacotes de ecossistema como Server-Side Rendering abordam o problema da otimização de mecanismos de busca.
O Ajax foi uma técnica popular em 2006, que usa solicitações assíncronas a um servidor para dados XML ou JSON, como com o XMLHttpRequest do JavaScript, objeto ActiveX, ou o moderno fetch() (2017). Ao contrário da abordagem declarativa da maioria dos frameworks SPA, o Ajax e sites usam diretamente JavaScript ou uma biblioteca JavaScript como o jQuery para manipular o DOM e editar elementos HTML, que oferece uma sintaxe mais simples e padroniza o comportamento do Ajax em diferentes navegadores, que historicamente tinham comportamentos variados.
O WebSocket é uma tecnologia de comunicação cliente-servidor bidirecional em tempo real integrada a especificação HTML, conexão única full-duplex sem novas requisições e handshakes e cabeçalhos HTTP, assim na comunicação em tempo real seu uso é superior ao Ajax em termos de desempenho, mantendo a latência baixa mesmo com altos volumes de mensagens. Usar WebSocket é a opção padrão da comunicação bidirecional, como Chat, transmissão ao vivo, um agente de IA; quando o cliente envia dados com a mesma frequência que o servidor.
Eventos enviados pelo servidor (do inglês server-sent events, SSEs) é uma técnica pela qual os servidores podem iniciar a transmissão de dados para os navegadores dos clientes usando a API EventSource; após o estabelecimento da conexão inicial, o fluxo de eventos permanece aberto até ser fechado pelo cliente, e os SSEs são enviados por meio do HTTP tradicional e possuem uma variedade de recursos que os WebSockets não possuem por design, como reconexão automática, IDs de eventos e a capacidade de enviar eventos arbitrários.
As origens do termo aplicação de página única não são claras, embora o conceito seja discutido desde 2003 por evangelistas de tecnologia da Netscape e, embora Stuart Morris, um estudante de programação da Universidade de Cardiff (País de Gales), escreveu no site slashdotslash.com os mesmos objetivos e funções em abril de 2002, e mais tarde, no mesmo ano, Lucas Birdeau, Kevin Hakman, Michael Peachey e Clifford Yeh descreveram uma implementação de aplicação de página única na patente americana US-8136109B1. As versões anteriores eram chamadas de aplicações web avançadas/rica.