NÃO COLOQUE AS TRÊS SIGLAS NO MESMO EIXO
MPA e SPA descrevem navegação; PWA descreve uma experiência Web aprimorada.
MULTI-PAGE APPLICATION
Qual documento será carregado?
Cada navegação principal normalmente pede outro documento HTML. Servidor e navegador participam da troca de página.
SINGLE-PAGE APPLICATION
Como a interface muda sem outro documento?
Após carregar um shell inicial, JavaScript gerencia rotas, busca dados e atualiza a interface no cliente.
PROGRESSIVE WEB APP
Quais capacidades a experiência oferece?
Instalação, funcionamento resiliente, integração ao dispositivo e experiência autônoma podem ser acrescentados progressivamente.
MPA · O DOCUMENTO É A UNIDADE DE NAVEGAÇÃO
Cada URL importante pode nascer como HTML completo.
Em uma aplicação multipágina, links e formulários usam a navegação nativa. O servidor escolhe ou renderiza o documento da rota. CSS e JavaScript podem ser compartilhados e reaproveitados do cache, por isso “nova página” não significa baixar tudo novamente.
Usuário ativa um link
O navegador resolve a URL, atualiza o histórico e inicia uma navegação.
Servidor processa a rota
Autenticação, consulta e template podem produzir HTML específico para aquela URL.
Novo documento é construído
O navegador analisa HTML, descobre recursos e substitui o documento anterior.
Recursos comuns podem vir do cache
Folhas, scripts, fontes e imagens versionadas não precisam ser transferidos integralmente outra vez.
Pontos fortes
- modelo nativo de URLs e navegação;
- HTML útil mesmo antes de grandes scripts;
- isolamento natural entre documentos;
- boa adequação a conteúdo e formulários tradicionais;
- falhas de JavaScript podem ter impacto menor.
Cuidados
- trocas completas podem parecer menos fluidas;
- estado visual entre páginas precisa ser persistido;
- templates e componentes devem evitar duplicação;
- servidor participa de mais navegações;
- interações ricas ainda exigem JavaScript direcionado.
SPA · A APLICAÇÃO CONTROLA AS ROTAS NO CLIENTE
O documento inicial permanece; a interface é atualizada.
Uma SPA carrega HTML, estilos e JavaScript que formam um app shell. O roteador do cliente intercepta navegações internas, usa a History API, busca dados ou código adicional e altera o DOM sem substituir o documento inteiro.
Shell inicial
Contêiner HTML, estilos, runtime e código das rotas essenciais.
Router
Mapeia URLs para telas e mantém histórico navegável.
Dados e chunks
APIs e importações dinâmicas fornecem conteúdo após o carregamento.
Estado da interface
Componentes preservam contexto e atualizam apenas regiões necessárias.
/produto/42, o servidor ou a plataforma de hospedagem deve devolver o shell da SPA; caso contrário, uma rota válida no cliente pode resultar em 404 no recarregamento.Pontos fortes
- transições locais fluidas;
- estado de interface pode sobreviver às rotas;
- boa experiência para ferramentas altamente interativas;
- cliente e API podem evoluir com contratos claros;
- carregamento sob demanda divide o código.
Cuidados
- JavaScript inicial pode atrasar interatividade;
- roteamento, foco e anúncios acessíveis exigem cuidado;
- erros no runtime podem afetar toda a aplicação;
- SEO e compartilhamento dependem da estratégia de renderização;
- cache e atualização de versões precisam ser coordenados.
PWA · APRIMORAMENTO PROGRESSIVO
A aplicação pode ganhar instalação, resiliência e integração.
Progressive Web App não é um formato único nem uma certificação universal. É uma experiência construída com tecnologias da Web e aprimorada conforme navegador e dispositivo oferecem suporte. Critérios de instalação e capacidades disponíveis variam entre plataformas.
Contexto seguro
Service Workers e APIs sensíveis exigem HTTPS, com exceções de desenvolvimento local.
Web App Manifest
Nome, ícones, cores, URL inicial e modo de exibição descrevem a experiência instalada.
Service Worker
Executa separadamente da página, recebe eventos e pode intermediar requisições e tarefas em segundo plano.
Estratégia de cache
A aplicação escolhe quais respostas tornam a experiência útil com rede lenta ou ausente.
Instalação
Quando os critérios do navegador são atendidos, a experiência pode ser adicionada ao dispositivo e aberta em janela própria.
Capacidades opcionais
Notificações, compartilhamento e outras APIs dependem de suporte, permissão e necessidade real.
Laboratório visual · Service Worker entre aplicação, cache e rede
Alterne a condição para entender por que “offline” precisa de uma estratégia explícita.
Online · network first: o Service Worker tenta obter dados atuais na rede e pode armazenar a resposta. Se houver falha, uma resposta compatível do Cache API pode funcionar como fallback.
MPA/SPA NÃO DECIDEM SOZINHAS SSR/CSR
Renderização e navegação são decisões relacionadas, mas separadas.
| Combinação | Primeira resposta | Navegação posterior | Exemplo conceitual |
|---|---|---|---|
| MPA + SSR | Servidor entrega HTML da rota. | Outro documento é renderizado no servidor. | Portal, documentação, loja tradicional. |
| MPA + ilhas | HTML completo com regiões interativas. | Navegação de documento; componentes locais hidratam. | Site de conteúdo com busca ou carrinho rico. |
| SPA + CSR | Shell com JavaScript. | Cliente busca dados e constrói telas. | Painel interno e ferramenta de edição. |
| SPA + SSR/hidratação | Servidor produz HTML inicial da SPA. | Cliente assume rotas após hidratar. | Aplicação pública com interação intensa. |
| MPA ou SPA + PWA | Qualquer uma das estratégias anteriores. | Service Worker e manifesto acrescentam capacidades. | Conteúdo offline ou ferramenta instalável. |
ESCOLHA PELO FLUXO, NÃO PELA MODA
A melhor arquitetura depende do produto, equipe e restrições.
O conteúdo deve funcionar antes de muito JavaScript?
Documentos renderizados e aprimoramento progressivo podem reduzir dependência do runtime.
A pessoa passa horas numa ferramenta com estado complexo?
Uma arquitetura SPA ou híbrida pode tornar transições e preservação de contexto mais naturais.
Quais URLs precisam funcionar diretamente?
Defina roteamento no servidor, fallback, status corretos, metadados e histórico antes de escolher framework.
O offline oferece valor real?
Liste jornadas possíveis sem rede e como dados pendentes serão sincronizados, cancelados ou resolvidos.
Qual é o orçamento de JavaScript?
Meça download, parsing, compilação, hidratação e execução em dispositivos representativos.
A equipe consegue operar a complexidade?
Build, cache, observabilidade, deploy, compatibilidade e depuração fazem parte do custo arquitetural.
PARE E PENSE
Um site instalado no celular abre em janela própria. Isso prova que funciona offline?
Separe instalação, armazenamento de recursos e disponibilidade dos dados.
CONTINUE EXPLORANDO
Referências e itens adicionais de estudo
Referências técnicas
Especificações e guias da plataforma usados nesta aula.
- WHATWG HTML · Browsing the Web — navegação, histórico e documentos.
- WHATWG HTML · Navigation and session history APIs — History API e navegação programática.
- W3C · Web App Manifest — metadados de instalação e apresentação.
- W3C · Service Workers — ciclo de vida, eventos e interceptação de fetch.
- web.dev · PWA installation — critérios que variam por navegador e plataforma.
- web.dev · Serving a PWA — cache, rede e estratégias de resposta.
- WHATWG · Fetch Standard — pipeline de requisições e respostas.
Itens adicionais de estudo
Experimentos para comparar arquiteturas.
- No Network, compare o clique de uma MPA com a troca de rota de uma SPA.
- Desative JavaScript e documente o que permanece utilizável em três sites.
- Abra diretamente uma rota interna de SPA e verifique status, HTML inicial e fallback.
- Use Lighthouse como diagnóstico, sem tratá-lo como certificado absoluto de PWA.
- Simule offline no DevTools e liste interface, dados e operações realmente disponíveis.
- Projete uma estratégia de atualização que não misture HTML novo com chunks JavaScript antigos.
- Compare cache first, network first e stale-while-revalidate para conteúdo e API.