Fala, pessoal! Tudo bem? No artigo de hoje eu vou falar um pouco sobre algumas das arquiteturas, ou até métodos de renderização, mais usadas no mercado: a SPA, SSG e SSR.
De todos que vou mencionar aqui, se você já estudou React, imagino que tenha ouvido falar no SPA, já que ele foi um dos principais fatores para deixar essa arquitetura conhecida.
Porém, você sabia que existem frameworks baseados em React, como o Next.JS, que trazem uma solução para algumas questões do React? Nesse artigo eu vou destrinchar o conceito dessas arquiteturas.
SPA: Single Page Application
Em métodos tradicionais para aplicações web, existem várias páginas html diferentes, cada uma com sua responsabilidade.
Como se tratam de páginas html diferentes, é valido pensar que é necessário um tempo para que elas sejam carregadas para o usuário, certo?
Uma aplicação que usa essa metodologia e que, ao mesmo tempo, precisa de muitas páginas, faz com que a experiência do usuário se torne mais facilmente prejudicada, já que o usuário vai precisar navegar por muitas páginas, e consequentemente, esperar o carregamento de todas elas.
A aplicação de página única, ou SPA, não precisa de várias páginas. Na verdade, ela usa apenas uma página, geralmente chamada de “index.html”, que vai ser responsável por gerar todo o site para o cliente.
E como ela faz isso? Basicamente, todo o carregamento de JavaScript, HTML e CSS da página é feito apenas uma vez.
Em outras palavras, quando o usuário entrar na aplicação, ele irá recebê-la carregada, sem a necessidade de fazer várias requisições para o servidor.
Tudo isso é feito através do JavaScript, pois, ele vai ser o responsável por carregar e transitar entre páginas nessa arquitetura.
Com isso, a experiência do usuário tende a aumentar bastante, já que agora ele pode navegar pela aplicação sem a necessidade de ficar esperando carregamentos desnecessários.
Mas óbvio que o SPA não é mil maravilhas.
Uma de suas desvantagens é o “peso” da aplicação. Isso porque aplicações muito pesadas tendem a demorar mais para serem carregadas, e a SPA é inteiramente carregada pelo browser do cliente.
SSG: Static Site Generator
O gerador de site estático, ou SSG, possibilita que a aplicação carregue todo o conteúdo de uma página de forma estática.
Recomenda-se essa arquitetura, geralmente, para páginas que não precisam de atualização constante.
Por exemplo, para uma página ecommerce com produtos atualizados frequentemente, uma estratégia de SSG não é a mais recomendada.
Uma das vantagens dessa arquitetura é entregar toda a página carregada para o usuário acessar, já que ela não precisa ser alterada com frequência, e normalmente, não precisa de consulta ou nada de servidores.
Sendo assim, uma das desvantagens do SPA, que seria uma possível sobrecarga no lado do cliente para carregar o conteúdo da aplicação, não vai estar mais presente nessa arquitetura.
Uma das vantagens também do SSG se comparado ao SPA é o SEO.
O Google lê nosso site para conseguir ranquear e entregar a melhor resposta para o usuário. Quando a aplicação é feita em SPA, é muito mais difícil para o Google entender o que tem no nosso site, porque ele só é carregado quando o cliente abre.
Isso não acontece com o SSG porque a página já está pronta. Assim, ela é lida pelo Google antes mesmo de ser aberta pelo cliente.
SSR: Server Side Rendering
Renderização do lado do servidor, ou SSR, é uma arquitetura onde o funcionamento se torna semelhante ao SSG. No entanto, a diferença consiste no fato do SSR procurar no servidor todas as requisições da página.
Esse é um dos principais motivos pelo qual o Next (framework baseado em React) faz tanto sucesso na comunidade e em empresas hoje em dia.
Além de permitir que a aplicação não fique tão pesada para o cliente, ele também possibilita que o SEO da aplicação seja bom e escalável.
Ele também permite que os dados da aplicação não sejam necessariamente estáticos, uma vez que ele faz novas requisições ao abrir a aplicação para o cliente.
Conclusão
Para concluir, não existe uma regra geral, ou seja, um framework ou biblioteca dificilmente vai ser o perfeito para todo tipo de aplicação.
Agora que você entendeu os conceitos dos principais métodos de renderização usados no front-end do mercado, você pode escolher qual deles faz sentido para você e para a sua aplicação.
Por fim, quero deixar um teste para você que nunca fez alguma aplicação usando essas arquiteturas.
O teste basicamente é: crie uma aplicação usando SPA, SSG E SSR. Para isso você pode utilizar React, Gatsby e Next, respectivamente.
Com uma pagina aberta, você entra no seu browser e desabilita o JavaScript. Fazendo isso, cada conceito que é dito nesse artigo vai ficar muito mais visível e você vai poder ver o funcionamento por baixo dos panos de cada biblioteca e framework dito aqui.
E depois que fizer essa experiência, posta no Instagram e marca a gente, certo? Assim vamos poder ver vocês fazendo esse teste.
Para saber mais sobre o assunto…
E se você quiser saber um pouco mais sobre o assunto, confere esses vídeos no nosso canal
React JS Curso Rápido ⚛️ Masterclass #1 2020 – 100% Prático!
Um forte abraço e até a próxima!
