DESENVOLVIMENTO WEB

22/10/2022

Entenda o que é uma SPA (Single Page Application)

O que é uma SPA?

Assim como o nome sugere, um aplicativo de página única é uma aplicação web que roda em uma única página, calma que te explico! Sabe quando, por exemplo, você clica em um dos itens da barra de navegação de algum site e precisa esperar que seu navegador carregue aquela nova página? Em uma SPA, todo o conteúdo já foi carregado quando você entrou no site, o que fará com que, ao clicar neste item que te levaria para uma nova página, ela carregue quase que instantâneamente, pois a SPA interage com seu navegador reescrevendo dinâmicamente o conteúdo com novos dados ao invés de carregar inteiramente novas páginas, como o método padrão do navegador faria.

Para entender melhor: em um site normal, a cada página em que o usuário acessa, novas requisições são feitas ao servidor, que por sua vez, entrega o arquivo final HTML para o navegador, que lê e interpreta o seu conteúdo para mostrar ao usuário. Esse processo é chamado de server-side rendering.

Já em um site SPA, essa requisição é feita por meio de JavaScript. É o navegador que monta o HTML que aparece para o usuário. Esse tipo de renderização é chamado de client-side rendering.

A SPA torna a experiência do usuário similar à de um aplicativo desktop, que fornece uma interface mais fluida após aberto e carregado pela primeira vez. Isto não significa que todo o conteúdo possível da aplicação já esteja carregado após isso. O que está carregado é apenas o seu código, seu funcionamento, o “core“ da aplicação. Por conta disso, ainda pode ser preciso esperar por loadings durante a navegação, pois o site fará requisições ao servidor ou à internet conforme necessário.

As SPAs são comuns em redes sociais, como o Facebook e o Instagram, streaming de vídeo e música, como o Youtube e o Spotify, ferramentas de comunicação, como o Discord, ou ferramentas de produtividade, como o Trello ou Slack. Outro exemplo de SPA muito usado é o Gmail do Google, a navegação acontece toda em uma única página e o conteúdo é carregado de uma só vez ou obtido dinâmicamente através de requisições cliente-servidor.

Vantagens de uma SPA

Assim como você deve ter notado, uma das vantagens mais perceptíveis para o usuário é a agilidade na navegação ao evitar a mudança de página e economizar dados, pois a aplicação contém todas as informações que precisa e apenas requisita e atualiza seus próprios dados conforme a necessidade, o que ajuda a garantir tempos de resposta baixos.

Uma das vantagens que o navegador proporciona ao se usar SPAs é o cacheamento de dados. Uma vez que a página tenha sido baixada, o navegador pode armazená-la em cache, o que agiliza o carregamento da aplicação, pois será necessário apenas solicitar o conteúdo atualizado ao servidor. Além disso, páginas no cache podem funcionar offline a partir dos dados já recebidos.

A SPA consome menos capacidade do servidor, pois este não será responsável por enviar ao cliente as páginas que devem ser carregadas, portanto, esta técnica em que a página busca dados no servidor para modificar suas próprias informações dinânicamente possibilita isolar o back-end do front-end de forma bem melhor, o que trás uma grande vantagem para o desenvolvimento, já que ambos os lados conseguem trabalhar de forma independente.

Desvantagens de uma SPA

SPAs costumam ter um carregamento inicial ligeiramente mais lento do que páginas estáticas, pois, basicamente, a aplicação é toda carregada ao se entrar nela pela primeira vez.

Outro problema muito abordado é sobre o SEO (Search Engine Optimization), que consiste nas estratégias e técnicas que o desenvolvedor utiliza em sua página web com o objetivo de melhorar o posicionamento do seu site em buscadores como o Google. Estes buscadores usam bots que varrem a internet à procura de novos sites para indexarem em suas buscas.

Quando o usuário pesquisa algo, este buscador irá olhar o conteúdo destes sites e apresentar ao usuário aquele que mais se encaixa em sua pesquisa. Apesar dos avanços e da modernização dos bots que interpretam essas páginas, ainda há uma dificuldade por parte deles em ler estes HTMLs montados no lado do cliente. Por isso, o SPA é um desafio para o SEO, pois acrescenta mais etapas ao processo de indexação.

Como posso melhorar o SEO do meu site?

Se o HTML de cada página for renderizado no navegador, o funcionamento das estratégias é prejudicado, pois é nesse código HTML em que estão recursos como o título da página, meta descrição, links internos e entre outros que o Google precisa para encontrar o conteúdo que você deseja entregar aos usuários. Uma das alternativas para isso é utilizar o server-side rendering (o qual falei sobre no primeiro tópico). Há algumas frameworks que auxiliam nisso, entre elas, temos o Next.js, uma das mais famosas dentro do ecossistema React. Inclusive, este site em que vos escrevo este post a utiliza!

Next.js é um framework React que surgiu com a proposta de facilitar a vida do desenvolvedor, trazendo várias features focadas em resolver problemas recorrentes. Essa tecnologia faz a pré-renderização do seu código React e envia diretamente o HTML contendo a estrutura do seu site para o navegador, assim, o buscador consegue visualizar e entender do que aquele site fala sem precisar do arquivo JavaScript, o que corrige um dos maiores problemas do React, que precisava ter seu JavaScript executado para visualizar o arquivo HTML completo.

Com ajuda da geração de páginas estáticas, os sites desenvolvidos com ajuda do Next.js são extremamente rápidos, melhorando a satisfação dos usuários. A renderização do lado do servidor utiliza o React para poder renderizar as páginas solicitadas, por exemplo, o usuário acessa a página de contato (/contato), o servidor reconhece esta rota que está sendo visitada e busca todas as informações relacionadas à ela, compilando o HTML e o retornando como parte da resposta inicial. Dessa forma, garantimos que as informações e os contextos específicos de cada página sejam acessados tanto pelos usuários quanto os indexadores de mecanismos de buscas, melhorando o posicionamento do site nos resultados de pesquisa.