React SPA: Entendendo o conceito de uma Single Page Application
Nesta documentação você aprenderá o que é uma Single Page Application e como esse conceito pode ser aplicado nas suas páginas, além de ver como utilizá-lo em um projeto React.
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:
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.
Confira outros conteúdos:
Perguntas frequentes
Quem somos?
Por que a programação se tornou a profissão mais promissora da atualidade?
Como faço para começar a estudar?
Em quanto tempo de estudo vou me tornar um programador?
Sim, você pode se tornar um programador e não precisa ter diploma de curso superior!
O que eu irei aprender estudando pela DevMedia?
Principais diferenciais da DevMedia
Qual o investimento financeiro que preciso fazer para me tornar um programador?
Como funciona a forma de pagamento da DevMedia?
Por
Wladimir
Em 2022
Nossos casos de sucesso
Eu sabia pouquíssimas coisas de programação antes de começar a estudar com vocês, fui me especializando em várias áreas e ferramentas que tinham na plataforma, e com essa bagagem consegui um estágio logo no início do meu primeiro período na faculdade.
Estudo aqui na Dev desde o meio do ano passado!
Nesse período a Dev me ajudou a crescer muito aqui no trampo.
Fui o primeiro desenvolvedor contratado pela minha
empresa. Hoje eu lidero um time de desenvolvimento!
Minha meta é continuar estudando e praticando para ser um
Full-Stack Dev!
Economizei 3 meses para assinar a plataforma e sendo sincero valeu muito a pena, pois a plataforma é bem intuitiva e muuuuito didática a metodologia de ensino. Sinto que estou EVOLUINDO a cada dia. Muito obrigado!
Nossa! Plataforma maravilhosa. To amando o curso de desenvolvimento front-end, tinha coisas que eu ainda não tinha visto. A didática é do jeito que qualquer pessoa consegue aprender. Sério, to apaixonado, adorando demais.
Adquiri o curso de vocês e logo percebi que são os melhores do Brasil. É um passo a passo incrível. Só não aprende quem não quer. Foi o melhor investimento da minha vida!
Foi um dos melhores investimentos que já fiz na vida e tenho aprendido bastante com a plataforma. Vocês estão fazendo parte da minha jornada nesse mundo da programação, irei assinar meu contrato como programador graças a plataforma.
Wanderson Oliveira
Comprei a assinatura tem uma semana, aprendi mais do que 4 meses estudando outros cursos. Exercícios práticos que não tem como não aprender, estão de parabéns!
Obrigado DevMedia, nunca presenciei uma plataforma de ensino tão presente na vida acadêmica de seus alunos, parabéns!
Eduardo Dorneles
Aprendi React na plataforma da DevMedia há cerca de 1 ano e meio... Hoje estou há 1 ano empregado trabalhando 100% com React!
Adauto Junior
Já fiz alguns cursos na área e nenhum é tão bom quanto o de vocês. Estou aprendendo muito, muito obrigado por existirem. Estão de parabéns... Espero um dia conseguir um emprego na área.
