Blog Javascript

Server Side Rendering no React sem Framework

O SSR é o processo de renderizar o HTML no lado do servidor, em vez de no lado do cliente.

React

20 jan 2023

Server Side Rendering no React sem Framework

Desafio

Um desafio comum ao usar o React é como melhorar o SEO (Search Engine Optimization) em aplicativos React.

Uma das maneiras de melhorar o SEO em aplicativos React é implementando o Server-side rendering (SSR).

O SSR é o processo de renderizar o HTML no lado do servidor, em vez de no lado do cliente.

Isso permite que os motores de busca indexem o conteúdo do aplicativo de forma mais eficiente, melhorando a visibilidade do aplicativo nos resultados de busca.

Como fazer?

Existem várias maneiras de implementar o SSR em aplicativos React. A abordagem mais comum é usar uma biblioteca como o Next.js, que fornece uma estrutura pronta para o SSR.

Mas, vamos buscar uma alternativa que não utilize Framework.

ReactDOMServer

O ReactDOMServer é uma parte do pacote ReactDOM, que fornece uma maneira de renderizar componentes React no lado do servidor.

Como funciona?

Ele fornece uma função chamada "renderToString" que permite aos desenvolvedores renderizar um componente React em uma string HTML.

Essa string HTML pode então ser enviada para o navegador, onde é usada para popular o conteúdo inicial da página (SSR).

Passo a Passo

  1. O desenvolvedor cria um componente React no código do lado do servidor.
  2. Usando a função "renderToString", o componente é renderizado em uma string HTML.
  3. Essa string HTML é enviada para o navegador junto com o código JavaScript do aplicativo React.
  4. O navegador usa a string HTML para popular o conteúdo inicial da página.
  5. O aplicativo React é iniciado no lado do cliente, e assume o controle da página.

Conclusão

É importante notar que essa abordagem requer mais configuração e trabalho do que usar uma biblioteca como o Next.js.

Independentemente da abordagem escolhida, é importante garantir que o aplicativo esteja configurado corretamente para o SSR.

Isso inclui garantir que todos os componentes sejam definidos como estáticos, evitando o uso de recursos que não possam ser carregados no lado do servidor, e garantindo que o aplicativo esteja configurado para lidar com o estado do navegador corretamente.