Server-Side Rendering (SSR) ou Renderização do Lado do Servidor, é o processo de renderizar uma aplicação web no servidor antes de enviá-la ao navegador. Este método foi desenvolvido para resolver problemas de SEO (Search Engine Optimization) que surgem ao utilizar frameworks JavaScript como o React e performance num geral.
Disclaimer: Vou usar o React.js como exemplo nesse artigo, mas tudo que foi dito aqui se aplica para outras bibliotecas (Angular, Vue etc…) também, fechou? 😉👍
Entendendo o Problema
Para compreender o papel do SSR, é essencial entender como o React funciona na renderização de páginas:
Abertura do Site pelo Usuário: Quando um usuário clica para abrir um site feito com React, o navegador inicia o processo de carregar a página.
Download do HTML Inicial: O navegador baixa o HTML básico do site. Se você já trabalhou com React, sabe que este HTML geralmente contém apenas um
<body>e uma<div>com oidroot.Carregamento e Execução do JavaScript: O navegador, em seguida, baixa e executa o JavaScript que realmente contém todo o conteúdo e a lógica da aplicação. A partir disso, o DOM (Document Object Model) é montado.
Esse processo, no entanto, cria um problema significativo para o SEO.
O Problema de SEO com Aplicações React
SEO (Search Engine Optimization), ou Otimização para Motores de Busca, é o conjunto de técnicas e estratégias que visam melhorar o posicionamento de um site nos resultados orgânicos de mecanismos de busca, como o Google. Um dos principais fatores que os motores de busca consideram ao indexar uma página é o conteúdo HTML.
No caso de aplicações React tradicionais, o HTML enviado ao navegador é praticamente vazio. Como o SEO analisa o HTML inicial da página para determinar seu conteúdo e relevância, um HTML vazio resulta em uma indexação deficiente, prejudicando o posicionamento da página nos resultados de busca.
A Solução: Server-Side Rendering (SSR)
Para contornar o problema de SEO em aplicações React, foi desenvolvida a técnica de Server-Side Rendering. Com o SSR, toda a aplicação em React é renderizada no servidor antes de ser enviada ao navegador. O processo funciona da seguinte maneira:
Requisição Inicial pelo Usuário: O usuário clica para abrir o site.
Renderização no Servidor: O servidor processa o JavaScript da aplicação e a partir dele, monta o HTML completo da página.
Envio do HTML Renderizado: O servidor entrega o HTML já renderizado juntamente com o JavaScript necessário para interatividade no navegador do usuário.
Benefícios do SSR
Além de resolver o problema de SEO, o SSR traz outras vantagens importantes:
Melhoria de Performance: Como o HTML já está pré-renderizado, o tempo de carregamento percebido pelo usuário é menor, o que proporciona uma experiência mais rápida e fluida. Isso é especialmente útil para usuários com dispositivos mais fracos ou conexões lentas.
Aumento da Segurança: Com o SSR, minimiza ou até mesmo anula o acesso do front-end direto às APIs, ja que todas as requisições são feitas pelo lado do servidor antes que o usuário tenha acesso à página. Isso reduz a o risco de ataque para potenciais vulnerabilidades.
Desvantagens e Custos do SSR
Apesar dos benefícios, o SSR também apresenta alguns desafios, como o custo operacional, manter um servidor ativo para realizar a renderização pode ser bem caro, especialmente em aplicações com um volume de tráfego muito grande. Serviços como Vercel, AWS, etc... Cobram pelo uso de recursos do servidor, o que pode aumentar significativamente os custos operacionais.
Opções para Implementar o SSR
Existem várias maneiras de implementar o SSR, dependendo das necessidades do projeto.
Uma delas é o SSR Tradicional, o servidor gera HTML para cada requisição, comum no PHP e em frameworks como Ruby on Rails.
O React Server Components (RSC) é um novo tipo de componente da versão 19 do React que é renderizado antecipadamente, antes do processo de build, em um ambiente separado do navegador ou do servidor SSR.
Eu diria que talvez o SSR Provider mais conhecido até então é o Next.js, que renderiza o conteúdo no servidor e entrega HTML pronto para o navegador, melhorando SEO e performance com menos esforço de configuração. Sendo esse o principal motivo para o Next.js ser o framework escolhido, com as novas atualizações do React, torna o futuro do Next.js incerto. Mas antes, mais um disclaimer:
Devo defender o Next.js, ele continua sendo uma ferramenta para construção de apps full-stack muito robusta, o React se atualizou e o Next.js também, e toda essa discussão sobre "pra que usar next agora?🤪" me inspirou a escrever uma série de artigos sobre Next.js, você pode acessar o primeiro dessa sequencia aqui: Conheça Next.js 14: O Framework Full-Stack para Aplicações Web Modernas
Get in Touch
Obrigado por chegar até aqui! Espero que esse artigo tenha te ajudado com suas dúvidas ou te ensinado algo novo. 😊
Para mim, pessoalmente, ensinar é a melhor forma de aprender. Então, se você tiver alguma dúvida ou sugestão, sinta-se à vontade para entrar em contato comigo:
Toda pergunta é valida! Bons estudos e que a sorte esteja sempre ao seu favor!
Top comments (9)
muito bom artigo, recentemente criei sites com Next JS e gostei. Recentemente tentei o Remix e também foi uma experiência muito boa, você deveria tentar 😃
Muito obriigado :) Parece interessante, vou dar uma lida sobre!
Sensacional a explicação, ficou super fácil de entender 👏🏾👏🏾
Que bom que gostou <3 <3
🔥
Muito bom ver conteúdos complexos explicados de forma simples, parabéns!
Obrigadoo <3
Parabéns pelo artigo, já vi vários materiais sobre, mas o seu foi simplesmente muito mais fácil de entender!
Extremamente agradecida por esse comentário! As vezes a visão de outra pessoa sobre tal assunto é justamente o que precisamos para absorver um conceito novo