DEV Community

Cover image for Server-Side Rendering (SSR): Uma Solução para SEO e Performance em Aplicações React
Sabrina Barros
Sabrina Barros

Posted on • Edited on

10 4 2 2 3

Server-Side Rendering (SSR): Uma Solução para SEO e Performance em Aplicações React

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:

  1. 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.

  2. 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 o id root.

  3. 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.

Exemplo de requisição web onde o servidor retorna um HTML simples sem conteúdo.

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:

Exemplo de requisição web onde o servidor retorna um HTML completo.

  1. Requisição Inicial pelo Usuário: O usuário clica para abrir o site.

  2. Renderização no Servidor: O servidor processa o JavaScript da aplicação e a partir dele, monta o HTML completo da página.

  3. 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!

Janet da serie

Referências

Top comments (9)

Collapse
 
mannuelf profile image
Mannuel

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 😃

Collapse
 
sabrinabarros profile image
Sabrina Barros

Muito obriigado :) Parece interessante, vou dar uma lida sobre!

Collapse
 
lahana profile image
Lahana da Silva Lameira

Sensacional a explicação, ficou super fácil de entender 👏🏾👏🏾

Collapse
 
sabrinabarros profile image
Sabrina Barros

Que bom que gostou <3 <3

Collapse
 
baltz profile image
baltz

🔥

Collapse
 
afonsopacifer profile image
Afonso Pacifer

Muito bom ver conteúdos complexos explicados de forma simples, parabéns!

Collapse
 
sabrinabarros profile image
Sabrina Barros

Obrigadoo <3

Collapse
 
gabrielnbs profile image
Gabriel Nascimento

Parabéns pelo artigo, já vi vários materiais sobre, mas o seu foi simplesmente muito mais fácil de entender!

Collapse
 
sabrinabarros profile image
Sabrina Barros

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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up