Explicando e entendendo SPA de um jeito simples

Meu primeiro post aqui e quero aproveitar para trazer um assunto que venho estudando ultimamente.

Como quase todo mundo, comecei minha jornada dev com a tríade clássica HTML, CSS e Javascript. Aí a gente mal começa a caminhar e já quer correr, certo? Pois bem, fui estudar React.

Alguns cursinhos, tutoriais e projetinhos depois, reparei que ninguém explica muito sobre o conceito de Single Page Application. Acredito que uma explicação simples já poderia ajudar o dev iniciante(assim como eu) a entender um pouco melhor algumas coisas.

Então vou tentar explicar aqui de um jeito bem simples, só para desanuviar um pouco o pensamento. Vamos lá!

Trata-se de um método utilizado no desenvolvimento front-end,
que consiste na criação de aplicações dinâmicas que carregam os recursos conforme necessário. O desenvolvimento é feito quase que totalmente no lado do cliente (client-side).

Os recursos - HTML, CSS e Javascript - carregam quando o usuário acessa a aplicação pela primeira vez. A partir daí, quando o usuário navega pelas páginas da aplicação, as requisições ao servidor já não são mais necessárias, diminuindo o tempo de carregamento.

Mas como assim? Na prática, o que ocorre não é uma mudança de página, mas uma substituição de conteúdos da página atual por outros conteúdos que vão sendo carregados a medida que navegamos. Ela se comunica com uma API RESTful por chamadas HTTP, e seus dados trafegam em formatos como JSON e XML.

Existem ainda aplicações híbridas, que utilizam o conceito de SPA em algumas partes, e em outras a navegação é prossegue de maneira tradicional.

Na desenvolvimento de SPA's são utilizados algumas bibliotecas e frameworks e como React, Angular e Vue, por exemplo.

Como principais vantagens, destacam-se um melhor aproveitamento de código, o que facilita a manutenção; melhor experiência do usuário; melhor performance.

Mas também existem desvantagens, como uma maior curva de aprendizado; renderização no lado do cliente, o que depende de boa conexão; e dificuldades com a questão do SEO, devido a falta de tags HTML, uma vez que o Javascript que cuida da renderização da tela, dificultando assim a leitura dos robôs.

Bom, espero que tenha ajudado a entender um pouquinho o conceito de SPA. A ideia aqui, em princípio, é compartilhar algumas anotações minhas de estudo com outras pessoas que também estão estudando essas mesmas tecnologias. O próximo passo agora é se aprofundar um pouco mais na arquitetura front-end e estudar as tecnologias de interesse.

Bons estudos!