O que são aplicações SPA? \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 13 Horas 58 Min 20 Seg Tempo restante da oferta: 13 58 20 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O que são aplicações SPA? [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) # O que são aplicações SPA? Neste artigo, vamos abordar o que são as aplicações baseadas em tecnologias SPA e o porquê de estas fazerem tanto sucesso nos dias atuais. [ Marylene Guedes ](https://www.treinaweb.com.br/blog/autor/marylene-guedes) 7 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/28112233/capa-SPA.png) Neste artigo, vamos abordar o que são as aplicações baseadas em tecnologias SPA e o porquê de estas fazerem tanto sucesso nos dias atuais. A sigla **SPA** vem de *Single Page Applications*, ou Aplicações de Página Única. Apesar de o nome permitir a dedução, isso não significa que a aplicação terá apenas uma única página. [ ![HTML5 + CSS3 - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg) Curso HTML5 + CSS3 - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-fundamentos) O que muda na verdade é a forma com que a página irá ser carregada. Estamos acostumados com aplicações onde as páginas são renderizadas do lado do servidor, independente da tecnologia utilizada. Isso traz um efeito: cada nova página que precisa ser carregada se traduz em uma nova requisição para o servidor, requisição esta para que o browser consiga carregar o [HTML, o CSS](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-html-e-css/ "HTML, o CSS") e o [JavaScript](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-javascript/ "JavaScript") da nova página requisitada. Por isso, em várias aplicações web, vemos o browser levando um “tempinho” para carregar a nova página, ou vemos a nova página ficar em branco inicialmente para ser carregada em seguida. Estes comportamentos ocorrem por causa do tempo entre o browser fazer a requisição para carregar a nova página e o servidor responder com as novas estruturas a serem renderizadas. Aplicações baseadas em [frameworks](https://www.treinaweb.com.br/blog/para-que-serve-um-framework/ "frameworks") SPA funcionam de maneira diferente, pois nelas não há a necessidade de se fazer requisições para carregamento de novas páginas. A aplicação seria “carregada” por inteiro na primeira requisição, onde todo o HTML, CSS e JavaScript necessários seriam carregados de uma vez. A partir deste momento, quando novas páginas precisassem ser carregadas, estas seriam carregadas através de rotinas JavaScript, retirando a necessidade de requisições para o servidor com a finalidade de obter o novo conteúdo a ser renderizado. Aplicações SPA de maneira geral nos permitem obter algumas vantagens. Uma delas é a possibilidade de otimização em geral da performance da aplicação ao deslocar todo o esforço de renderização para o cliente e permitir um tráfego de dados mais leve entre cliente e servidor. Outra é o reaproveitamento de código através de tecnologias como React/React Native e Angular/Ionic, o que possibilita o desenvolvimento com menor esforço e mais padronizado até mesmo de aplicações mobile. Porém, aplicações SPA têm a tendência de possuírem alguns pontos fracos, como justamente o deslocamento do esforço de renderização para o cliente e, em alguns casos, questões de SEO. ### Como aplicações SPA funcionam? 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 HTML, CSS e JavaScript 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 para o servidor para a carga dessas novas páginas: o conteúdo relacionado a elas já foi baixado no primeiro acesso. O que acontece nesse momento é que o conteúdo da página é carregado via JavaScript, código este que é justamente gerado com base nos frameworks SPA, como Angular, React e Vue.js. Por isso, dizemos que o processamento do carregamento das páginas e seus respectivos recursos passa para o cliente, já que JavaScript é uma linguagem majoritariamente client side (existem algumas exceções, como quando trabalhamos com Node.js). [ ![Node.js - Introdução a APIs REST com Express](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/node-js.svg) Curso Node.js - Introdução a APIs REST com Express Conhecer o curso ](https://www.treinaweb.com.br/curso/nodejs-introducao-a-apis-rest-com-express) Neste momento, o servidor fica responsável não mais por renderizar e processar a renderização do conteúdo, mas sim por lidar com os dados a serem manipulados pela aplicação. As operações de persistência em bancos de dados ou a devolução de conteúdo para ser renderizado (como uma lista de clientes, por exemplo) passam a ser exclusivamente da aplicação hospedada do lado do servidor. Atualmente, o que é comum é que o servidor exponha uma API RESTful para ser consumida por uma aplicação SPA. A aplicação SPA se comunica com essa API RESTful através de chamadas HTTP, trafegando dados em formatos como XML e JSON. A aplicação do lado do servidor fica responsável por responder a estas chamadas HTTP, realizando os processos de negócio e de persistência que sejam pertinentes na situação. Essa arquitetura traz uma vantagem muito clara: a separação e isolamento completos do back-end e do front-end. Isso possibilita que duas equipes trabalhem nas duas frentes em paralelo por exemplo, além de permitir esforços mais focados: uma pessoa que lida melhor com aspectos ligados ao front-end pode direcionar todo o seu esforço para tarefas relacionadas ao front-end. O mesmo vale para quem tem mais aptidão ao back-end. ### Como e onde utilizar? Atualmente, aplicações SPA podem ser utilizadas em praticamente todas as situações, o que explica bastante a popularização de frameworks SPA como [Angular](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve/ "Angular"), [React](https://www.treinaweb.com.br/blog/conheca-o-react-biblioteca-para-desenvolvimento-web/ "React"), [Vue.js](https://www.treinaweb.com.br/blog/o-que-e-o-vue-js/ "Vue.js") e [Ember](https://www.treinaweb.com.br/blog/o-que-e-ember-js/ "Ember") na atualidade. Porém, existem algumas situações onde frameworks SPA podem não ser tão adequados hoje: • Aplicações que precisem de SEO extremo podem ter problemas se forem desenvolvidas com frameworks SPA. A maioria dos indexadores hoje conseguem entender aplicações SPA, além de dispormos de uma grande quantidade de meta-tags para melhorar este ponto. Porém, é um trabalho adicional frente à clássica renderização de páginas múltiplas no servidor (também chamado de multi-page application). Esse “probleminha” acontece justamente porque o conteúdo não é renderizado no servidor,, sendo renderizado completamente no cliente. Por isso, os mecanismos de busca podem encontrar dificuldade para indexar o conteúdo das páginas, tendo em vista que eles não podem indexar conteúdo gerado do lado do cliente. Isso explica porque a maioria dos frameworks SPA hoje contam com soluções SSR (Server-Side Rendering), onde pelo menos uma parte do conteúdo é carregado do lado do servidor para favorecer os mecanismos de indexação; • Aplicações SPA podem ser um pouco mais lentas, principalmente na inicialização. Isso ocorre porque todo o conteúdo precisa ser baixado de uma vez para o cliente no primeiro acesso. Além disso, como todo o processo de renderização passa a ser de responsabilidade do cliente, a aplicação passa a sofrer um pouco com possíveis limitações de hardware de quem a acessa. Porém, obviamente, existem técnicas para mitigar este ponto, como o lazy loading; • De maneira geral, aplicações SPA precisam que o JavaScript no browser esteja habilitado, embora não seja tão comum hoje em dia que o mesmo seja desabilitado. Também existem técnicas que podem mitigar este ponto, como o próprio SSR; • Há uma ligeira tendência a aplicações SPA serem menos seguras do que aplicações multi-page renderizadas no servidor, principalmente no que diz respeito a ataques XSS. Porém, de fato, isso na verdade está mais atrelado ao conhecimento do desenvolvedor sobre técnicas para evitar estes tipos de ataques; precauções estas que deveriam ser tomadas inclusive em aplicações renderizadas do lado do servidor; • Atenção à fragilidade do ecossistema JavaScript. Esse é um ponto bem polêmico, mas é fato que a “instabilidade” de frameworks JavaScript é algo a se considerar. É relativamente comum que você desenvolva uma aplicação com uma determinada versão de um framework SPA, mas seja obrigado a reescrever uma quantidade considerável de código quando precisar atualizar a versão do framework utilizada inicialmente no projeto. Esse é, sem sombra de dúvidas, um fator importante a ser colocado na balança; não só no que diz respeito a utilizar um framework SPA ou um framework MPA, mas também no que diz respeito à decisão sobre qual framework SPA deverá ser utilizado, se for o caso. [ ![Desenvolvedor Front-end Pleno](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg) Formação Desenvolvedor Front-end Pleno Conhecer a formação ](https://www.treinaweb.com.br/formacao/desenvolvedor-front-end-pleno) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #SPA ](https://www.treinaweb.com.br/blog/tag/spa) - [ #página web ](https://www.treinaweb.com.br/blog/tag/pagina-web) Autor ![Marylene Guedes](//secure.gravatar.com/avatar/5b0ba52b3705f298802db58782656bbc?d=mm) ## Marylene Guedes Responsável pelo sucesso do cliente na TreinaWeb. Graduada em Gestão de Tecnologia da Informação pela FATEC Guaratinguetá, além de estudante de UX/UI. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/marylene-guedes) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/spa-e-ssr-quais-as-diferencas-400x280.png) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 6 anos atrás ## [ SPA e SSR: quais as diferenças? ](https://www.treinaweb.com.br/blog/spa-e-ssr-quais-as-diferencas) Confira neste artigo as diferenças entre SPA e SSR, as vantagens e desvantagens de cada uma, além de quando utilizá-las. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/ANGULAR-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 7 anos atrás ## [ O que é o Angular e para que serve? ](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve) Frameworks SPA atualmente são um padrão de mercado quando falamos sobre desenvolvimento front-end. Neste artigo, vamos abordar o Angular, um dos mais populares. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/07/node-js-por-que-voce-deve-conhecer-essa-tecnologia-400x280.png) [ Node ](https://www.treinaweb.com.br/blog/categoria/node-js) 10 anos atrás ## [ Node.js: por que você deve conhecer essa tecnologia? ](https://www.treinaweb.com.br/blog/node-js-por-que-voce-deve-conhecer-essa-tecnologia) Neste artigo, Bruna Goss, da Umbler, esclarece o que vem a ser o Node.js, onde a sua utilização pode ser vantajosa e quando é melhor ou não contar com ele. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2016/10/yarn-um-novo-gerenciador-de-dependencias-para-javascript-400x280.jpg) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ Yarn: Um novo gerenciador de dependências para JavaScript ](https://www.treinaweb.com.br/blog/yarn-um-novo-gerenciador-de-dependencias-para-javascript) Yarn nasceu para ser uma opção rápida e segura de se gerenciar dependências em JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Micro-Front-End-Microserviços-no-seu-navegador-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ Micro Front-End - Microserviços no seu navegador ](https://www.treinaweb.com.br/blog/micro-front-end-microservicos-no-seu-navegador) Entenda o que são Micro Front-ends, como funcionam, suas vantagens e quando você deve escolher esta estratégia para a arquitetura de suas aplicações. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/27144616/AWS-S3-400x280.png) [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon) 7 anos atrás ## [ O que é AWS S3? ](https://www.treinaweb.com.br/blog/o-que-e-aws-s3) Nesse artigo vamos conhecer o AWS S3, um serviço de armazenamento de arquivos na nuvem da Amazon. Vamos conhecer suas vantagens, suas aplicações mais comuns e quando não utilizá-lo. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/13172051/CORS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ O que é CORS e como resolver os principais erros ](https://www.treinaweb.com.br/blog/o-que-e-cors-e-como-resolver-os-principais-erros) Nesse artigo vamos entender o que é CORS, quais os principais erros relacionados com ele, suas principais causas e como resolve-los corretamente. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/04/5-bons-motivos-para-estudar-javascript-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ 5 bons motivos para estudar JavaScript ](https://www.treinaweb.com.br/blog/5-bons-motivos-para-estudar-javascript) O JavaScript é uma linguagem que está praticamente em todos os lugares por causa de sua flexibilidade e adaptabilidade à diversos ambientes. Vamos conferir nesse artigo 5 bons motivos para você estudar essa linguagem. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/02/18175820/RAZOR-COMPONENTS-400x280.png) [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 8 anos atrás ## [ .NET Core 3.0 - Razor Components ](https://www.treinaweb.com.br/blog/net-core-3-0-razor-components) Conheça as aplicações Razor Components que serão adicionadas no .NET Core 3.0. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/linguagens-paradigmas-400x280.jpg) [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 10 anos atrás ## [ Linguagens e paradigmas de programação ](https://www.treinaweb.com.br/blog/linguagens-e-paradigmas-de-programacao) Saiba um pouco mais sobre as linguagens de programação e seus principais paradigmas. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/01/TWELVE-FACTOR-APP-400x280.png) [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 6 anos atrás ## [ O que são os 12 Factor App? - Parte 1 ](https://www.treinaweb.com.br/blog/o-que-sao-os-12-factor-app-parte-1) Se você trabalha desenvolvendo aplicativos que funcionam como um serviço, conheça os 12 (Twelve) Factor App, uma metodologia que te ajudará a criar aplicações melhores. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/IMG-CAPA-MARYLENE-400x280.png) [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 6 anos atrás ## [ O que são microsserviços? ](https://www.treinaweb.com.br/blog/o-que-sao-microsservicos) O termo "microsserviços" tem sido muito utilizado nos últimos anos. Confira neste artigo o que é um microsserviço e quando utilizá-lo. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **13h 58min 20s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58