Arquitetura Single Page Application

A arquitetura SPA é um dos principais símbolos do desenvolvimento WEB moderno. Podendo ser traduzida para aplicações de uma única página, é comum que desenvolvedores que não compreendem o que acontece por baixo dos panos de seu framework favorito, vejam somente o efeito visual que uma SPA gera, sem entender o que realmente está acontecendo ali, e muito menos têm em mente os benefícios e os problemas que essa arquitetura pode trazer dependendo do objetivo da aplicação.

A seguir, vamos entender de forma simples e direta como uma aplicação SPA se comporta.

Aplicação Web Tradicional vs SPA

Dentro de uma aplicação que segue o modelo tradicional, o comportamento será o seguinte:

A cada mudança de página, um novo arquivo index.html é gerado e devolvido pronto para o navegador, gerando um efeito de recarregamento (F5) a cada navegação. Isso é o que precisamos entender sobre o modelo tradicional para que fique simples de compreender a arquitetura SPA.

Entretanto, uma SPA funciona de forma diferente, o arquivo HTML é retornado para o navegador apenas na requisição inicial junto de outros recursos necessários para que o cliente possa montar seu conteúdo, e quando o usuário navegar para outra página, o framework, seja ele React, Svelte, Vue, vai interceptar essa ação, não vai deixar a página realizar o reload, e vai requisitar para o servidor que ele retorne apenas arquivos .JSON e .JS para que dentro do navegador do usuário, o DOM seja alterado somente nas partes necessárias.

A imagem abaixo nos ajuda a entender o modo de funcionamento de uma SPA:

A abordagem de uma arquitetura SPA em nossa aplicação nos traz alguns pontos que precisamos ter claros e obrigatoriamente necessitam ser levados em consideração antes de optarmos por utilizar esta arquitetura.

Características da arquitetura SPA

• Experiência do Usuário: Devido ao comportamento das Single Page Applications de não recarregarem a página a cada URL que o usuário navega, a fluidez durante o uso da aplicação é o primeiro benefício que o próprio usuário sente. Comumente aplicações SPA possuem uma sidebar lateral ou um menu superior, e o único conteúdo que é alterado durante a navegação é o centro da página.

• Carga maior em cima do navegador: Como o cliente é responsável por pegar os arquivos .JS e .JSON para alterar o DOM, pode acontecer que computadores mais modestos sofram com aplicações robustas.

• Problemas com SEO: A aplicação é renderizada dinamicamente no navegador do usuário, dessa forma, para os motores de busca se torna menos eficiente e mais desafiador indexar o seu site, pois o arquivo HTML é retornado no primeiro momento sem conteúdo nenhum.

• Tempo inicial de renderização maior: Após a página ser aberta pela primeira vez, uma requisição é feita para o servidor esperando que ele retorne os scripts necessários para a renderização da página, um tempo é aguardado para que esses scripts sejam interpretados pelo browser e somente após esse momento a página é renderizada para o usuário.

SPA é a melhor arquitetura?

Como todo arquiteto de software diria: Depende!

Existem alguns trade-offs que você precisa considerar analisando junto o objetivo da sua aplicação, o importante é conseguir entender como todos esses conceitos funcionam, para que sua tomada de decisão arquitetural seja coerente com o domínio da sua aplicação.