O que é Server-Side Rendering (SSR) e porque é importante?

Fábio Oliveira — Sat, 24 Feb 2024 18:50:05 +0000

Provavelmente se veio até esse post, você já ouviu falar sobre Server-Side Rendering (SSR).

Mas talvez você esteja um pouco perdido sobre o que realmente é "isso", assim como eu também estive há um tempo atrás.
Então, como o SSR pode melhorar o desempenho da sua aplicação? Veio ao lugar certo, vou fazer por você o que fizeram por mim quando comecei.

Meu propósito com esse e outros posts, é justamente atacar as dúvidas que parecem "bobas" e que as vezes quando perguntamos para aquele dev Seniôr, ele responda de um jeito que só nos deixa mais confuso (eu tenho propriedade para falar isso).
Mas vamos ao que interessa:

Que diabos é SSR?

Em poucas palavras, o Server-Side Rendering (SSR) envolve a renderização das páginas do lado do servidor antes de serem enviadas para o navegador do usuário. Isso significa que o HTML, CSS e, às vezes, até mesmo o JavaScript são gerados no servidor e enviados para o navegador como uma página completa, pronta para ser exibida imediatamente.

Para ver isso na prática, quando estiver em uma pagina web com SSR, se nas ferramentas do desenvolvedor, você desativar o JavaScript, provavelmente nada na página será alterado, visto que ela já veio para o usuário "construida", lá no servidor.

Porque você deveria usar ele em suas aplicações?

Aqui estão as razões que vão te convencer que o SSR é uma boa escolha.

1 - Melhor desempenho inicial: Com o SSR, os usuários da sua aplicação poderão ver o conteúdo da página mais rapidamente, já que a renderização inicial é feita no servidor e enviada pronta para o navegador. Isso reduz o tempo de carregamento percebido e melhora a experiência do usuário.

2 - SEO otimizado: Os motores de busca valorizam o conteúdo renderizado no servidor, o que pode melhorar a classificação da sua página nos resultados de pesquisa. Isso ocorre porque o conteúdo é visível para os rastreadores de pesquisa desde o primeiro carregamento da página. Independente da finalidade da sua aplicação, é muito importante se preocupar com o SEO.

3 - Compatibilidade com vários navegadores: O SSR ajuda a reduzir os problemas de compatibilidade entre navegadores, garantindo que o conteúdo seja renderizado de forma consistente em diferentes navegadores. Ao renderizar o conteúdo no servidor e enviá-lo como HTML puro para o navegador, o SSR elimina muitas das complexidades associadas à renderização do lado do cliente, como diferenças de suporte a recursos entre navegadores.

Muito bem, agora que já te expliquei como funciona e te convenci (ou não) a usar:

Como você pode implementar o SSR no seu projeto?

Existem várias maneiras de fazer isso, dependendo do framework ou biblioteca que você está utilizando. Por exemplo, o Next.js para React e o Angular Universal para Angular são duas opções populares que facilitam a implementação do SSR.
Eu particularmente tenho feito uso do React com Next, tenho me dado muito bem e conseguido criar aplicações incriveis e com um bom desempenho.

Em resumo, o Server-Side Rendering (SSR) é uma técnica poderosa que pode melhorar significativamente o desempenho e a acessibilidade das suas aplicações web. Ao considerar o SSR em seu projeto, você pode fornecer uma experiência mais rápida e agradável para seus usuários, ao mesmo tempo em que melhora sua visibilidade nos motores de busca.

Mas como tudo na vida, também há alguns motivos para você não usar o SSR, mas isso já é assunto para outro artigo.
Até o mais!

Fábio Oliveira
Desenvolvedor Front End

DEV Community: Fábio Oliveira

O que é Server-Side Rendering (SSR) e porque é importante?

Que diabos é SSR?

Porque você deveria usar ele em suas aplicações?

Como você pode implementar o SSR no seu projeto?