dev-resources.site

for different kinds of informations.

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

Published at

9/24/2024

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

Referências

ssr Article's

30 articles in total