¿Qué proporciona Angular SSR (Universal)?

Question

Accepted Answer

**Angular SSR** (históricamente llamado Angular Universal) renderiza el HTML de tu aplicación **en el servidor** para la solicitud inicial, en lugar de enviar una página vacía que el navegador debe llenar con JavaScript. Esto mejora el SEO, el rendimiento percibido y el primer paint. ## El problema que SSR resuelve ```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 ``` Con SSR, el servidor produce HTML completo para que los usuarios y los motores de búsqueda obtengan contenido real de inmediato; Angular luego adjunta listeners de eventos (hidratación) para hacerlo interactivo. ## Configurarlo ```bash ng add @angular/ssr # adds server rendering to an existing app ``` Esto genera un servidor Node/Express que renderiza Angular en el servidor y sirve el HTML pre-renderizado. ## Lo que SSR proporciona ```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 ``` ## Hidratación — evitando un re-render ```ts provideClientHydration() // non-destructive hydration: reuse server HTML, don't rebuild ``` La **hidratación no destructiva** de Angular moderno reutiliza el DOM renderizado en el servidor en lugar de descartarlo y re-renderizar — evitando un parpadeo y mejorando el rendimiento. ## 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 ``` Angular también soporta **prerendering** (SSG) de rutas en tiempo de compilación para la entrega más rápida posible de contenido estático. ## Advertencias ```text ⚠️ No browser APIs on the server (window, document, localStorage) — guard with isPlatformBrowser ⚠️ More infrastructure (a Node server to run/maintain) ``` ## Por qué es importante Para sitios con mucho contenido, e-commerce, o cualquier aplicación donde **el SEO y el primer paint rápido importan**, un SPA Angular solo del cliente se queda corto — los motores de búsqueda y los usuarios obtienen una página en blanco hasta que se ejecute JS. SSR (con hidratación) resuelve esto entregando HTML real de antemano, y SSG va más allá para contenido estático. Saber cuándo SSR vale su complejidad añadida — y las advertencias de API del navegador — es la decisión arquitectónica clave.