Single Page Application (SPA) vs Server Side Rendering (SSR)
Single Page Application (Páginas de Aplicação Única) tem sido a principal abordagem de desenvolvimento web na última década, mas nos últimos anos tem acontecido uma migração para Server Side Rendering (Renderização do lado do servidor). Nesse post vamos falar sobre as duas abordagens, discutindo o que elas são e em quais cenários cada uma se sai melhor.
Um pouco de história
Hoje em dia temos o forte conceito de frontend e backend onde desenvolvedores web separam as responsabilidades em diferentes projetos. O backend sendo responsável pelas regras de negócio e por manter as informações armazendas enquanto o frontend é responsável por mostrar as informações na tela e permitir que os usuários interajam com ela.
Antes do advento dos smartphones não havia uma forte separação como acontece hoje porque websites eram desenvolvidos pensando apenas em serem acessados em computadores. Com essa abordagem os navegadores deveriam apenas mostrar sites estáticos criados em um servidor. Conforme os smartphones começaram a se tornar populares e seus usuários começaram a acessar websites a partir dos dispositivos móveis, uma necessidade de separação surgiu no desenvolvimento web.
Computadores, smartphones, tables e outros dispositivos possuem diferentes tamanhos e formatos de telas e eles devem ter diferentes formas de exibir interfaces que otimizem suas necessidades, mesmo que as informações e as regras de negócio sejam as mesmas. Com isso o conceito de backend e frontend ganhou força, porque uma separação em projetos possibilitaria que um mesmo backend service diferentes frontend, cada um desenvolvido para satisfazer a necessidade do dispositivo.
Single Page Application (SPA)
SPA foi a forma mais comum de desenvolvimento web após a separação em backend e frontend. Com SPA, quando um usuário entra na página, apenas um documento é carregado e a página é montada por Javascript sob demanda. Essa implementação permite aos usuários interagirem com a página conforme ela vai sendo carregada, dando aos usuários uma experiência de navegação muito boa.
Single page applications trouxeram uma melhora de performance para a experiência do usuário, que precisa esperar um tempo muito curto até que o primeiro carregamento seja feito para poder começar a navegar. Essa possibilidade de interagir com os componentes da tela enquanto os demais estão carregando permitiram a criação de páginas dinâmicas e isso foi muito aceito pelas pessoas.
O principal problema das SPAs é a incapacidade de mostrar informação para os mecanismos de busca, já que as páginas são carregadas por Javascript. Esse fato cria um problema muito grande para sites que dependem de SEO (Search Engine Optimization / Otimização para Mecanismos de Busca), porque elas não conseguem ser indexadas e ranqueadas. Também é importante mencionar que SPAs possuem dificuldade de medição de performance, uma vez que dependem do navegador do cliente para que o conteúdo seja renderizado.
Por outro lado, existem frameworks e bibliotecas muito populares que facilitam a implementação das SPAs, como React, Vue.js e Angular.
Server Side Rendering (SSR)
O conceito de Server Side Rendering surgiu para tentar resolver alguns problemas das SPAs. Nessa forma de implementação os navegadores recebem um arquivo que está pronto para ser mostrado em tela porque já foi renderizado no lado do servidor. Com essa abordagem o conteúdo pode ser lido por mecanismos de busca permitindo que as páginas sejam indexadas e ranqueadas, o que significa que dessa forma os apps podem ter SEO.
Com SSR é mais fácil de medir performance já que as páginas são renderizadas no mesmo lugar, mas isso também trás alguns problemas como mais uso do servidor porque todas vez que o usuário acessa uma nova página, uma chamada para o servidor precisa ser disparadas para que a página seja renderizada. O fato de as páginas serem renderizadas no servidor também bloqueia os usuários de interagirem com ela até que ela seja totalmente carregada, fazendo o TTFB (time for first byte/ tempo para o primeiro byte) ser maior que nas SPAs.
Server side rendering tem algumas desvantagens, mas elas são compensadas pela capacidade de permitir que o app tenha SEO e melhores métricas de performance.
Também existem ótimos frameworks e bibliotecas para implementar SSR, como Next.js e Nuxt.js
SPA vs SSR
SPA Prós
- Boa experiência de usuário, já que eles podem interagir com a página antes que ela esteja totalmente carregada;
- Fácil de implementar com frameworks e bibliotecas populares;
- Pode dar um alívio ao servidor, uma vez que as instruções para construir as páginas são carregadas na primeira chamada.
SPA Contras
- Sem SEO. As páginas são renderizadas por Javascript e os mecanismos de busca não leem o Javascript;
- Dificuldade de medir performance já que as páginas dependem do navegador do usuário pra serem renderizadas.
SSR Prós
- Melhor SEO já que as páginas são carregadas no servidor e não dependem de Javascript para serem renderizadas;
- Melhores métricas de performance já que as páginas são renderizadas no mesmo lugar.
SSR Contras
- Usuários não podem interagir com a página até que ela esteja toda carregada;
- Mais uso do servidor porque cada nova página carregada precisa fazer uma chamada ao servidor.
Conclusão
Ambas abordagens são muito poderosas e possuem vantagens e desvantagens específicas, o que não significa que uma seja melhor que a outra e você deveria pensar no problema que seu app quer resolver para decidir qual a melhor forma de implementar seu site. Se sua aplicação depende de SEO, escolha SSR. Pelo outro lado, se SEO não é importante pro seu caso e você quer uma experiência de usuário mais fluída, escolha SPA.
Gostou do conteúdo?
Compartilhe com um amigo que também gostaria desse assunto e me conte nos comentários algo que você gostaria de ver no futuro por aqui?