SSG, SSR, SPA, MPA, CSR. Se você é desenvolvedor e, assim como eu, tentou se aventurar um pouco no desenvolvimento frontend web, já deve ter se deparado com algum desses termos. Uma das maiores confusões que enfrentei pesquisando o assunto foi entender os diferentes tipos de renderização - não por serem necessariamente complexos, mas porque existe uma certa dificuldade em encontrar informações claras e precisas sobre. Grande parte dos recursos disponíveis e das discussões em fóruns técnicos acabam misturando conceitos distintos, especialmente métodos de renderização com estratégias de navegação. Quando não misturam esses conceitos, focam muito nas vantagens e desvantagens de cada abordagem, sem explicar adequadamente o que são e como funcionam.
Antes de iniciar, é importante relembrar o ciclo de vida de uma requisição e a diferença entre conteúdo estático e dinâmico. Quando um usuário acessa um site, seu navegador primeiro faz uma requisição HTTP para obter o HTML da página. Após receber o HTML, o navegador começa a processá-lo e, durante esse processo, identifica e realiza novas requisições para obter recursos adicionais necessários (como arquivos CSS, JavaScript e imagens). Este processo pode levar desde alguns milissegundos até vários segundos, dependendo da latência e velocidade da conexão.
Quanto ao conteúdo, ele pode ser classificado como estático ou dinâmico. Conteúdo estático é aquele que permanece o mesmo para todos os usuários e raramente muda - por exemplo, o logotipo de um site, textos institucionais ou imagens decorativas. Já o conteúdo dinâmico é gerado ou personalizado no momento da requisição, podendo variar com base em diversos fatores como o usuário logado, a hora do dia ou dados do banco de dados - por exemplo, o feed de uma rede social, comentários em um blog ou dados de um painel administrativo.
Para começar, é fundamental estabelecer uma distinção clara: esses métodos podem ser divididos em duas categorias principais - os métodos de navegação (SPA e MPA) e os métodos de renderização (SSR, SSG e CSR). Quando você encontra alguém perguntando o que vale mais a pena entre SSR e SPA, por exemplo, já existe um erro conceitual na própria pergunta, pois são conceitos que abordam aspectos diferentes do desenvolvimento web. Para facilitar o entendimento, vamos primeiro explorar os métodos de navegação, depois os métodos de renderização e, por fim, explicar como eles podem ser combinados e utilizados em conjunto.
Métodos de Navegação: MPA vs SPA
Os métodos de navegação definem como é realizada a transição entre diferentes páginas ou seções de um site. Vamos usar como exemplo um portfólio simples com duas páginas: "Quem eu sou" (página inicial em portfolio.com) e "Meus projetos" (em portfolio.com/projetos). A navegação entre essas páginas pode ser feita através de uma barra de navegação superior, onde o usuário clica para acessar a página desejada.
No método MPA (Multi Page Application), que é a abordagem tradicional da web, quando um usuário navega da página inicial para a página de projetos, o navegador faz uma nova requisição ao servidor. O servidor, por sua vez, envia uma nova página HTML para o navegador. Este método é utilizado desde o início da internet e continua sendo amplamente empregado hoje, sendo especialmente adequado para sites com conteúdo principalmente estático, como blogs e sites institucionais. O Astro, por exemplo, é um framework que tradicionalmente utiliza esta abordagem.
Já no método SPA (Single Page Application), que ganhou popularidade na última década, a navegação entre páginas é, na verdade, uma simulação. Todo o site funciona como uma única página, e quando o usuário "navega", o que realmente acontece é uma troca dinâmica de conteúdo, sem necessidade de recarregar a página inteira. O endereço na barra do navegador muda para dar a impressão de navegação, mas é tudo gerenciado por JavaScript. Esta abordagem é muito utilizada em aplicações web modernas, como o Gmail e o Facebook, onde a experiência do usuário precisa ser mais fluida e similar a um aplicativo desktop. Frameworks como React, Vue e Angular foram inicialmente projetados com foco neste tipo de aplicação. O ciclo de requisição aqui é bifurcado: o navegador primeiro recebe um HTML estático mínimo e, então, o JavaScript assume, renderizando a página dinamicamente.
É importante notar que um site pode utilizar ambos os métodos. Por exemplo, podemos manter a navegação entre "home" e "projetos" como uma SPA, mas ter uma seção de "blog" que carrega como MPA, aproveitando o melhor de cada abordagem conforme a necessidade.
Métodos de Renderização: SSG, SSR e CSR
Agora que entendemos como a navegação funciona, vamos explorar os diferentes métodos de renderização. Estes métodos determinam como e quando o conteúdo e estrutura HTML da página é gerada. Para facilitar o entendimento inicial, vou explicar os métodos em sua forma mais clássica e isolada.
O SSG (Static Site Generation) é o método onde as páginas são renderizadas durante o processo de build do website. Neste processo, todo o código fonte (seja ele em React, Vue, Svelte ou qualquer outro framework) é transformado em arquivos HTML, CSS e JavaScript otimizados. O JavaScript resultante geralmente se concentra em funcionalidades interativas da página, não sendo responsável pela estrutura básica do conteúdo, que fica por conta do HTML e CSS. O Astro, por exemplo, é um framework que utiliza SSG em combinação com MPA. Este método é ideal para blogs, sites de documentação e portfólios, onde o conteúdo não muda frequentemente. No SSG, a estrutura da página é estática. Durante o ciclo de requisição, o servidor simplesmente entrega arquivos HTML pré-gerados, sem processamento adicional.
No CSR (Client Side Rendering), a estrutura da página é renderizada no navegador do usuário. O servidor normalmente envia um HTML simplificado, junto com o JavaScript necessário para construir a interface. Embora o HTML básico carregue, a página só se torna funcional quando o JavaScript é executado, tornando o carregamento inicial mais demorado. Este é o método tradicionalmente usado por aplicações React puras, e é comum em SPAs, sendo ideal para aplicações altamente interativas onde o conteúdo se altera dinamicamente.
O SSR (Server Side Rendering), similar ao SSG, gera HTML completo, mas faz isso sob demanda, quando o usuário faz a requisição. Isso permite que o conteúdo seja personalizado para aquele usuário, ou esteja atualizado com as últimas informações do banco de dados, sem a necessidade de acessar uma API JSON. Frameworks como Next.js utilizam bastante dessa abordagem. O SSR também traz algumas desvantagens, como uma carga maior no servidor em comparação aos outros métodos, e, no caso de páginas que usam frameworks JavaScript, também é necessário um runtime como o Node rodando no servidor.
Combinações e Nuances dos Métodos de Renderização
A realidade do desenvolvimento web moderno é que os métodos de renderização raramente existem em suas formas "puras". As combinações entre eles não são apenas uma questão de usar diferentes métodos para diferentes páginas, mas sim de misturá-los de formas fundamentais e intrínsecas, onde às vezes é difícil distinguir onde um método termina e outro começa. Esses métodos também não precisam ser usados para carregar uma página toda, podem ser usados para renderizar apenas pedaços dela.
Por exemplo, considere uma página que utiliza CSR (Client Side Rendering). Em sua forma mais básica, ela começaria com um HTML quase vazio e dependeria totalmente do JavaScript para construir a interface. Mas será que precisamos realmente começar com uma página vazia? Podemos aproveitar o processo de build para pré-renderizar o conteúdo inicial que o usuário verá (conhecido como "first paint" ou "initial render"), criando uma experiência híbrida entre SSG e CSR. Nessa combinação, a estrutura inicial da página utiliza SSG, enquanto novas alterações utilizam CSR, otimizando o ciclo de requisição.
Indo além, vamos supor que a gente quer nessa mesma página adicionar uma informação que muda constantemente, como a previsão do tempo, e queremos que o usuário tenha acesso a essa informação imediatamente, usar requisições javascript só funcionariam depois que a página estivesse carregada, então podemos usar SSR no lugar de SSG para o nosso HTML inicial, e continuar usando CSR para futuras alterações na páginas.
Podemos criar quaisquer combinações entre os 3 métodos de renderização, e utilizar junto com qualquer mistura entre os 2 tipos de navegação, você não está limitado a escolher apenas um.
Conclusão
A escolha entre diferentes métodos de navegação e renderização não é uma questão de "melhor ou pior", mas sim de adequação ao caso de uso. Muitas aplicações modernas combinam diferentes abordagens para otimizar a experiência do usuário em cada contexto.
O mais importante é entender como essas técnicas podem ser usadas para melhorar a sua aplicação e se adequar as suas limitações. Com o surgimento de frameworks cada vez mais sofisticados, as linhas entre essas abordagens se tornam mais tênues, permitindo soluções cada vez mais híbridas e otimizadas.
Este é um tema extenso e complexo, e existem muitas nuances que não puderam ser completamente abordadas neste texto. Se você tiver quaisquer críticas, dúvidas ou sugestões, ficarei muito feliz de responder nos comentários.
Top comments (0)