Com o crescimento do desenvolvimento de aplicações web, surgiram diferentes formas para melhorar a experiência do usuário na web. Duas dessas formas são o SSR (Server-Side Rendering) e o SPA (Single-Page Application), que procuram melhorar o desempenho e a interatividade das aplicações. Neste artigo, vamos explicar o que é cada uma dessas abordagens e as diferenças entre elas.
O que é SSR?
O SSR é uma técnica de renderização em que o servidor processa a solicitação do usuário e envia uma página HTML completa de volta ao navegador. Ou seja, antes de a página ser exibida no navegador, todo o processamento necessário já foi feito no servidor. A principal vantagem disso é que o usuário não precisa esperar pelo carregamento completo da página para começar a visualizá-la. Além disso, o SSR ajuda no SEO (Search Engine Optimization), pois os motores de busca podem indexar melhor as páginas geradas pelo servidor.
Vantagens SSR
Melhoria do processo de indexação: como parte do conteúdo é renderizado no servidor, é possível definir o conteúdo a ser carregado a partir do servidor da aplicação de maneira que este conteúdo colabore com os mecanismos de indexação dos motores de busca;
Menor exigência da máquina do cliente, já que parte do esforço de renderização fica ainda no servidor;
Melhor performance da aplicação em geral na maioria dos casos, justamente porque parte da aplicação já é pré-renderizada. Isso auxilia a reduzir inclusive incômodos na experiência de usuários de aplicações SSR, como a rápida página em branco (ou flicker) que acontece em uma parte das aplicações SPA (a página fica em branco enquanto o cliente não termina de processar o JavaScript para carregar a aplicação toda);
Desvantagens SSR
O TTFB (time to first byte) em aplicações SSR é maior, pois o servidor precisa justamente pré-carregar parte do conteúdo antes de enviar a resposta para o cliente. TTFB é o tempo entre o servidor receber a requisição e enviar o primeiro conteúdo a ser renderizado pelo cliente. Enquanto o TTFB não acontece, o usuário vê a página sendo “carregada” pelo cliente;
Um pouco de incômodo dependendo da experiência de carga: como aplicações SSR são pré-renderizadas pelo servidor, assim que o TTFB é concluído, o cliente começa a iniciar imediatamente o processo de renderização, mostrando a aplicação para o usuário. Porém, o usuário só poderá interagir com a aplicação de fato quando o cliente terminar a sua parte da carga da aplicação. Se o processo de carga do lado do cliente for um pouco extenso, isso pode causar uma experiência de usuário estranha;
O que é SPA?
O SPA é uma forma em que a aplicação web é carregada em uma única página, atualizada dinamicamente conforme o usuário interage com a aplicação. Com o SPA, a maioria das interações do usuário é processada no navegador, sem a necessidade de carregar uma nova página do servidor. Isso melhora a velocidade de carregamento e a interatividade da aplicação, mas pode afetar negativamente o SEO, pois as páginas são carregadas dinamicamente, portanto não são indexáveis pelos motores de busca.
Vantagens SPA
É possível prover interações na aplicação sem a necessidade de recarregamento, oferendo uma experiência muito mais fluída para o usuário;
Suporte rico e refinado através de frameworks de mercado maduros, como o Angular, o React e o Vue.js;
Pode ocasionar “alívio” ao servidor da aplicação, já que não há a necessidade de se realizar uma requisição ao servidor a cada vez que é necessário carregar um novo conteúdo.
Desvantagens SPA
Performance imprevisível: podem ocorrer algumas inconsistências, justamente pelo deslocamento do esforço de renderização para o cliente: se existir código JavaScript escrito de maneira incorreta, a performance da aplicação pode ser seriamente afetada;
Dificuldades no SEO: aplicações que precisem de SEO podem ter problemas se forem desenvolvidas com frameworks SPA. Como em uma SPA você precisa carregar o JavaScript para então fazer requisições, você acaba não tendo conteúdo para ser indexado por motores de busca como o Google: o conteúdo é carregado de maneira dinâmica. Hoje, já existem maneiras de auxiliar o SEO em aplicações SPA, mas ainda assim, esse é um possível ponto de atenção.
Diferenças entre SSR e SPA
A principal diferença entre SSR e SPA é aonde a página é renderizada. No SSR, a página é renderizada no servidor antes de ser enviada para o navegador, enquanto no SPA, a renderização ocorre no navegador, conforme o usuário interage com a aplicação. Outra diferença importante é que o SSR é melhor para SEO, enquanto o SPA é melhor para a experiência do usuário.
Além disso, as aplicações SSR são geralmente mais lentas no primeiro carregamento da página, pois todo o processamento é feito no servidor, enquanto nas aplicações SPA são mais rápidas no primeiro carregamento, mas podem ser mais lentas à enquanto o usuário interage com a aplicação, especialmente se a aplicação for muito complexa e exigir muitas interações com o servidor.
Top comments (0)