Cómo usar Angular Universal (SSR) en Angular

28/5/2025

¿Tienes una SPA (Single Page Application) en Angular y necesitas mejorar el SEO o el tiempo de carga inicial? Entonces necesitas Angular Universal, la solución oficial para renderizado del lado del servidor (Server-Side Rendering, SSR).

¿Qué es Angular Universal?

Angular Universal permite que Angular renderice tu aplicación en el servidor (Node.js) antes de enviarla al navegador. Esto tiene dos grandes beneficios:

📈 Mejora el SEO (los bots ven HTML renderizado).
⚡ Carga inicial más rápida, especialmente en conexiones lentas.

Paso 1: Agregar Angular Universal

Asumiendo que ya tienes una app Angular creada:

“

`ng add @nguniversal/express-engine```

Este comando:

Agrega Angular Universal y Express a tu proyecto.
Crea los archivos server.ts, main.server.ts, app.server.module.ts.
Actualiza el angular.json y tu package.json con nuevos scripts.

Estructura resultante

Después del comando, tendrás algo como:

src/ ├── main.ts (cliente) ├── main.server.ts (servidor) ├── app/ │ ├── app.module.ts │ └── app.server.module.ts server.ts

Paso 2: Construir y ejecutar SSR

Compilar y ejecutar:

“

npm run build:ssr && npm run serve:ssr

“

Esto compila tu app en modo SSR y la sirve con Express. Por defecto estará disponible en:

http://localhost:4000

🎯 Abre la pestaña “ver código fuente” en el navegador para ver el HTML renderizado.

Personalizar `server.ts` (opcional)

El archivo server.ts se puede extender para:

Redirecciones (por ejemplo, http → https)
Agregar middlewares (como compresión, logs, autenticación) server.get('*', (req, res) => { res.render(indexHtml, { req }); });

“

Desplegar tu app SSR

Puedes desplegarla en:

Vercel / Netlify (como función serverless)
Firebase Hosting + Cloud Functions
Render.com
Servidor VPS / Node propio

Cosas a tener en cuenta

Algunas APIs del navegador como window o document no están disponibles en SSR. Usa condicionales como: if (isPlatformBrowser(this.platformId)) { // solo se ejecuta en el navegador }
Aumenta ligeramente la complejidad del despliegue comparado con una SPA pura.

Publicado originalmente en modestocabraldev.com.

Compartir artículo

Si te ha resultado útil, compártelo con alguien que esté construyendo su portfolio.