DEV Community

Pedro Dos Santos
Pedro Dos Santos

Posted on

SPA (Single Page Application)

SPA(Single Page applicaton) é um tipo de aplicação web que ,apesar da nomeclatura, não se trata de uma única página. A diferença existe na forma como a página é carregada, geralmente as aplicações são renderizadas pelo lado do servidor, nas SPA’s não, o contéudo é carregado uma única vez no momento inicial de acesso a aplicação e conforme necessário vai se atualizando apenas as partes mais relevantes da página, sem recarregar a página por completa, tornando a usuabilidade melhor para o usuário.

De modo geral, em uma aplicação SPA, o carregamento de recursos (como HTML,CSS e Javascript) ocorre do lado do cliente(browser) via APIs Javascript, desta formas se retira uma responsabilidade do servidor de renderizar e processar os contéudos, mas apenas lidar e manipular os dados da aplicação, focando na persistência em bancos de dados e retornar os dados para o cliente, geralmente utilizando comunicação RestFull via chamadas HTTP, devolvendo dados no formato XML e JSON. Essa arquitetura é ótima pois mantém uma separação de responsabilidades bem clara entre back-end e front-end, permitindo ter duas equipes trabalhando em paralelo.

Bons exemplos de aplicações escaláveis com SPA’s são: Gmail, Outlook, Trello, Airbnb e Netflix.

Muitas SPAs são construídas utilizando frameworks JavaScript, como: Angular, React ou Vue.js. Esses frameworks simplificam o desenvolvimento, facilitando a criação de componentes reutilizáveis e gerenciando o estado da aplicação de maneira eficiente.

Mas como não há “bala de prata” no mundo da programação, neste tipo de aplicação web também possui vantagens e desvantagens. Algumas delas são:

Vantagens:

  • Melhor experiência do usuário, pois não há necessidade de ao mudar de página ter uma busca em um servidor para obter a página, deixando a navegação mais fluída.
  • Desenvolvimento mais fácil e rápido, não havendo necessidade de escrever código para renderizar páginas via servidor.
  • Melhor funcionamento off-line e cache.

Desvantagens:

  • Acoplamento ao Javascript no navegador, pois uma SPA requer que Javascript esteja presente e ativado.
  • Menor capacidade de otimização no SEO.

tecnologia-quadro

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay