React SPA: Entendendo o conceito de uma Single Page Application

O que é uma SPA (Single Page Application)?

SPA (Single Page Application) é uma aplicação que carrega apenas um único documento Web e, em seguida, atualiza o conteúdo do corpo desse documento único por meio de APIs JavaScript.

Como funciona uma Single Page Application?

De maneira geral, em uma aplicação SPA, o carregamento dos recursos (como CSS, JavaScript e HTML das páginas) ocorre apenas uma única vez: na primeira vez em que o usuário acessa a aplicação.

Nesse primeiro acesso, todo o conteúdo já é transferido para o cliente. A partir deste momento, quando o usuário transitar pelas páginas da aplicação, não será necessário mais fazer requisições ao servidor para a carga dessas novas páginas: o conteúdo relacionado a elas já foi baixado no primeiro acesso.

O conteúdo da página é carregado via JavaScript, código este que é justamente gerado com o uso de bibliotecas que auxiliam na construção de SPA's.

Por isso, dizemos que o processamento do carregamento das páginas e seus respectivos recursos passa para o cliente, já que o JavaScript é uma linguagem majoritariamente client-side.

Exemplos de Single Page Applications

As SPA estão presentes no nosso dia a dia há algum tempo. Grandes exemplos disso são o Gmail, o Outlook, o Trello e outras aplicações (web), conforme vemos nas Figuras 1 a 3. Na mesma página temos a possibilidade de abrir uma mensagem, excluí-la, respondê-la, etc., sem que toda a estrutura seja recarregada (apenas a parte central muda).

Bibliotecas JS usadas para construir uma SPA

No JavaScript temos diversas bibliotecas e o uso de algumas delas é bastante comum na hora de construir uma SPA. As mais famosas a serem usadas são:

• AngularJS
• React.js
• Vue.js

Vantagens da SPA

• Uma SPA é rápida, pois a maioria dos recursos (HTML+CSS+Scripts) são carregados apenas uma vez ao longo da vida útil do aplicativo.
• O desenvolvimento é simplificado, não havendo a necessidade de escrever código para renderizar páginas no servidor. É muito mais fácil começar porque normalmente você pode iniciar o desenvolvimento a partir de um simples arquivo, sem usar nenhum servidor.
• As SPAs são fáceis de debugar com o Chrome, pois você pode monitorar as operações de rede, investigar os elementos da página e os dados associados a ela.
• Com o uso da SPA você acaba por diminuir a carga do servidor que tem muito o que fazer e pouca folga e por isso passa um pouco do trabalho pesado para o cliente que sempre tem muita folga, ajudando inclusive reduzir chances de ataques serem bem-sucedidos.

Desvantagens da SPA

• Com a SPA fica complicado fazer otimização no SEO. Seu conteúdo é carregado por AJAX (Asynchronous JavaScript and XML) - um método de troca de dados e atualização no aplicativo sem atualizar a página.
• A SPA requer que o JavaScript esteja sempre presente e ativado. Se algum usuário desabilitar o JavaScript em seu navegador, não será possível apresentar o aplicativo e suas ações de forma correta.
• Comparado ao aplicativo “tradicional”, o SPA é menos seguro. Devido ao Cross-Site Scripting (XSS), ele permite que invasores injetem scripts do lado do cliente em aplicativos da Web por outros usuários.
• Um vazamento de memória no código JavaScript pode afetar a SPA sobrecarregando o navegador e causando lentidão no sistema.

Exemplo de uma SPA criada com o React

Por fazer parte do contexto desta documentação criamos um exemplo de aplicação SPA com o uso da biblioteca React JS.

Não entenda o uso do React como obrigatório para a criação de SPAs: você pode usufruir de outras bibliotecas para criar a sua própria aplicação. A escolha da biblioteca geralmente é feita levando em consideração as necessidades do projeto a ser criado.

Veja abaixo em detalhes o código de uma SPA criada com o React JS.