Como funciona a tecnologia de renderização do lado do…

A renderização do lado do servidor (SSR) é uma técnica em que a primeira visualização de uma página web ocorre no servidor, e não no navegador do utilizador.

Na renderização cliente habitual, o navegador recebe um ficheiro HTML vazio com um link para JavaScript. O navegador carrega o JavaScript, analisa-o, executa-o e só então constrói dinamicamente o DOM e mostra o conteúdo.

Com SSR, o servidor processa os componentes da aplicação, gera o código HTML pronto e envia-o ao navegador.

Etapas do SSR:

Pedido: O navegador do utilizador envia um pedido HTTP ao servidor.
Renderização no servidor: O servidor executa o código JavaScript da aplicação, incluindo a lógica de renderização dos componentes UI, e obtém uma cadeia HTML totalmente formada.
Resposta: O servidor envia este ficheiro HTML ao navegador.
Visualização inicial: O navegador recebe o HTML e mostra imediatamente o conteúdo da página, pois todos os elementos já estão presentes na marcação.
Hidratação: Após carregar o HTML, o navegador carrega e executa o código JavaScript da aplicação. Este código "traz à vida" a marcação estática, adicionando interatividade, manipuladores de eventos e vinculando o estado.

Vantagens do SSR:

SEO melhorado: Os motores de busca indexam melhor as páginas com HTML completamente formado.
Primeira pintura de conteúdo mais rápida (FCP - First Contentful Paint): O utilizador vê o conteúdo da página mais rapidamente.
Melhor acessibilidade para dispositivos fracos e internet lenta: Menor dependência do desempenho do dispositivo cliente para mostrar o conteúdo principal.

Desvantagens do SSR:

Carga aumentada no servidor: O servidor realiza mais cálculos para o renderizado.
Complexidade de desenvolvimento: É necessário considerar a isomorfia do código (capacidade de executá-lo tanto no servidor como no cliente).
Tamanho da resposta maior: A primeira resposta do servidor contém HTML completo.

// Exemplo de código do cliente (pseudocódigo)
// A aplicação cliente habitual recebe uma div vazia
const appDiv = document.getElementById('app');
// JavaScript carrega e cria conteúdo
appDiv.innerHTML = `<h1>Olá, mundo!</h1>`;

// Exemplo de código do servidor (pseudocódigo usando um framework)
// No SSR, o servidor gera HTML completo
import ReactDOMServer from 'react-dom/server';
import App from './App';

const html = ReactDOMServer.renderToString(<App />);
// O servidor envia algo como:
// <div id="app"><h1>Olá, mundo!</h1></div>

Como funciona a tecnologia de renderização do lado do servidor (SSR)?