O que é renderização no servidor?
A renderização no servidor (SSR) gera o HTML inicial de uma página no servidor e o envia ao navegador. Depois, o JavaScript no cliente pode hidratar esse HTML para oferecer interatividade.
Como funciona a renderização no servidor
A SSR executa a renderização de componentes em um servidor para cada requisição ou a partir de um cache no servidor, produzindo uma representação HTML que pode ser exibida antes da execução do pacote da aplicação. A hidratação então associa a lógica do cliente à marcação correspondente quando há necessidade de interatividade. Isso difere da geração estática, que cria HTML antes das requisições, e de páginas renderizadas inteiramente no cliente, que começam com uma estrutura mínima. A SSR faz parte do caminho de entrega web e pode combinar o contexto da requisição, dados do backend e roteamento antes da resposta.
Informações essenciais
- A hidratação espera que a árvore inicial do cliente corresponda à marcação do servidor; configurações de localidade, horário, aleatoriedade ou ramificações exclusivas do navegador podem causar divergências e descarte de trabalho.
- A renderização no servidor pode disponibilizar o primeiro conteúdo mais cedo, mas a lentidão dos dados do backend ou o processamento sem cache aumenta o tempo até o primeiro byte, a menos que o trabalho seja transmitido progressivamente ou armazenado em cache.
- O código executado durante a SSR não tem acesso ao DOM do navegador, e componentes marcados para o cliente ainda podem ser renderizados no servidor para gerar o HTML inicial. Portanto, leia window ou document apenas em código exclusivo do navegador, como efeitos ou manipuladores de eventos, e carregue por importação dinâmica no cliente os módulos que acessam esses objetos no momento da importação.
Quando a renderização no servidor é importante
Use SSR quando o conteúdo inicial, as prévias de links, a descoberta por mecanismos de busca ou a resiliência sem JavaScript forem importantes. Ela acrescenta trabalho de renderização no servidor e pode causar erros de hidratação se o resultado no navegador diferir do HTML do servidor.