Cómo usar Angular Universal (SSR) en Angular

¿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:

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.