Por que usar renderização no servidor

Renderização no lado do servidor (SSR) executa seu app Angular no servidor para produzir HTML totalmente renderizado a cada solicitação. O navegador recebe uma marcação significativa imediatamente, em vez de um esqueleto vazio.

Um app com renderização exclusivamente no cliente (CSR) envia um index.html quase vazio acompanhado de JavaScript. Usuários e rastreadores veem uma página em branco até que o pacote seja baixado, analisado e executado. O SSR corrige essa lacuna na primeira exibição.

Muitos rastreadores e robôs de pré-visualização de links leem o HTML inicial. Com SSR, o título da página, as meta tags e o conteúdo estão presentes na resposta, o que melhora a indexação e as pré-visualizações avançadas nas redes sociais.

Como o servidor envia HTML renderizado, o navegador exibe o conteúdo mais cedo. Isso melhora o First Contentful Paint (FCP) e a velocidade percebida, especialmente em redes ou dispositivos lentos.

O SSR pode melhorar o Largest Contentful Paint (LCP) ao entregar o conteúdo principal no HTML inicial, em vez de fazê-lo depois da execução do JavaScript. Bons indicadores ajudam tanto a experiência do usuário quanto a classificação nas buscas.

Quando alguém compartilha um link, as plataformas acessam a URL e leem as meta tags do Open Graph e do Twitter no HTML. O SSR garante que essas tags reflitam a página real, produzindo cartões precisos.

Depois de entregar o HTML, o mesmo app é inicializado no cliente e assume a interatividade. Esse processo é chamado de hidratação; o Angular moderno reutiliza o HTML do servidor em vez de renderizá-lo novamente.

O SSR adiciona custo e complexidade ao servidor: um ambiente de execução Node, preocupações com código exclusivo do servidor ou do navegador e renderização no momento da solicitação. Avalie esses aspectos em relação aos ganhos de SEO e desempenho do seu app.

Páginas públicas, com muito conteúdo e sensíveis a SEO (marketing, blogs e listagens de comércio eletrônico) são as que mais se beneficiam. Painéis internos protegidos por login geralmente ganham pouco com SSR.

Para rotas predominantemente estáticas, a pré-renderização (SSG) gera HTML no momento da compilação, oferecendo benefícios semelhantes aos do SSR sem um servidor ativo. O Angular oferece suporte a SSR e pré-renderização lado a lado.

O Angular moderno oferece SSR nativo por meio de @angular/ssr, com o construtor de aplicações, hidratação completa do DOM e modos de renderização por rota, tornando o SSR muito mais simples do que as configurações antigas do Angular Universal.

Você aprendeu por que o SSR é importante: HTML real na primeira solicitação melhora o SEO, as pré-visualizações em redes sociais, o FCP e o LCP. Ele adiciona custo ao servidor, é adequado para páginas públicas com muito conteúdo, complementa a pré-renderização e o Angular moderno o oferece como recurso nativo por meio de @angular/ssr.