O que o Angular SSR (Universal) oferece?

Question

Accepted Answer

**Angular SSR** (historicamente chamado de Angular Universal) renderiza o HTML do seu aplicativo **no servidor** para a solicitação inicial, em vez de enviar uma página vazia que o navegador deve preencher com JavaScript. Isso melhora o SEO, o desempenho percebido e o first paint. ## O problema que o SSR resolve ```text Client-side rendering (default SPA): Server sends empty + JS bundle → browser downloads & runs Angular → THEN content appears → slow first paint; crawlers/social bots may see a blank page Server-side rendering: Server runs Angular, sends fully-rendered HTML → content visible immediately → Angular "hydrates" it for interactivity ``` Com SSR, o servidor produz HTML completo para que usuários e mecanismos de busca obtenham conteúdo real imediatamente; o Angular então anexa listeners de eventos (hydration) para torná-lo interativo. ## Configurando ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Isto cria um servidor Node/Express que renderiza o Angular no servidor e fornece o HTML pré-renderizado. ## O que o SSR oferece ```text ✓ Better SEO — crawlers get full content (critical for content/marketing sites) ✓ Faster First Contentful Paint — visible content before JS loads ✓ Better social sharing — link previews see real meta tags/content ✓ Improved performance on slow devices/networks ``` ## Hydration — evitando uma nova renderização ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` A **hydration não-destrutiva** do Angular moderno reutiliza o DOM renderizado pelo servidor em vez de descartá-lo e renderizá-lo novamente — evitando cintilação e melhorando o desempenho. ## Relacionado: SSG (prerendering) ```text SSR → render per request (dynamic content, always fresh) SSG → prerender pages at BUILD time (static, fastest) — good for content that rarely changes ``` O Angular também oferece suporte a **prerendering** (SSG) de rotas no tempo de build para a entrega mais rápida possível de conteúdo estático. ## Ressalvas ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Por que isso importa Para sites com muito conteúdo, e-commerce ou qualquer aplicativo onde **SEO e fast first paint importam**, um SPA Angular apenas para cliente fica aquém — mecanismos de busca e usuários recebem uma página em branco até que o JS seja executado. SSR (com hydration) resolve isso entregando HTML real de imediato, e SSG vai além para conteúdo estático. Saber quando o SSR vale sua complexidade adicionada — e as ressalvas da API do navegador — é o julgamento arquitetônico principal.