🧠 Comprendiendo el Server-Side Rendering (SSR) en Angular 20: SSR vs CSR vs Pre-rendering

¡Hola a todos!
Angular versión 20 acaba de ser lanzada, y hoy vamos a hablar de un tema muy solicitado por la comunidad: el Server-Side Rendering (SSR), la hydratación, y cómo estos conceptos están integrados en Angular.
Personalmente, me encanta especialmente la hydratación incremental en Angular, y profundizaremos en ella más adelante.
Esta será la primera parte de una serie en múltiples episodios. Comenzaremos desde cero, creando una nueva aplicación Angular con SSR activado, y exploraremos paso a paso qué es el SSR y cómo funciona.

🤔 ¿Qué es el Server-Side Rendering (SSR)?

Cuando hablamos de Server-Side Rendering, nos referimos a que el HTML completo se genera en el servidor, y se hace bajo demanda.

💡 La palabra clave aquí es “bajo demanda”: esto significa que cada vez que un usuario accede a una ruta específica que está configurada para renderizado en servidor, se ejecuta un proceso de generación de HTML en el servidor, y luego se devuelve al cliente ya renderizado.

Esto implica una carga adicional en el servidor, ya que cada solicitud del mismo contenido requiere un nuevo proceso de renderizado. Por eso, SSR es ideal para páginas dinámicas donde necesitas obtener datos de una base de datos, insertarlos en el template y enviar el resultado al cliente.

✅ Ventajas del SSR:

• Contenido visible inmediatamente: evita pantallas en blanco o loaders.
• Mejor experiencia de usuario: el contenido llega ya formado.
• Mejor posicionamiento SEO: los motores de búsqueda indexan fácilmente el contenido ya renderizado.
• Llamadas a APIs controladas: puedes realizar consultas a APIs o bases de datos directamente desde el servidor.

🔁 CSR vs SSR: Depende del contexto

En el Client-Side Rendering (CSR), el servidor solo envía un shell HTML junto con el bundle de JavaScript. Es el navegador quien después ejecuta Angular, procesa el código y genera el contenido final.

El CSR destaca en aplicaciones monopágina (SPA), especialmente en navegaciones posteriores. Una vez cargada la página inicial, Angular puede cargar rutas adicionales de forma asíncrona, ofreciendo una navegación fluida sin recargar completamente la página.

Por otro lado, el SSR brilla en la primera carga: el contenido aparece inmediatamente, mejorando métricas como el First Contentful Paint (FCP) y el Largest Contentful Paint (LCP).

⚙️ Crear una aplicación Angular 20 con SSR

Para crear una nueva aplicación Angular con SSR activado:

ng new ngv20-demo-app --ssr

Selecciona CSS como estilo y responde No al modo Zoneless por ahora.

Este comando configura automáticamente todo lo necesario para ejecutar SSR usando Express.js: - src/main.server.ts - src/server.ts - src/app.routes.ts

Una vez creado el proyecto, constrúyelo y ejecútalo:

ng build
npm run serve:ssr

Tu aplicación estará disponible en http://localhost:4000.

📂 Estructura del proyecto Angular con SSR

Dentro del proyecto, encontrarás dos carpetas principales en dist/: - browser/: contiene los archivos estáticos (HTML, JS, CSS) - server/: contiene el bundle del servidor (main.js, server.mjs, etc.)

El archivo server.ts configura el servidor Express y usa el paquete @angular/ssr/node para renderizar la aplicación Angular del lado del servidor.

🧪 Probar los diferentes modos de renderizado

Angular 20 permite configurar fácilmente el modo de renderizado dentro del archivo app.routes.ts. Las opciones son: - 'client': renderizado únicamente del lado del cliente - 'server': renderizado del lado del servidor en cada solicitud - 'prerender': renderizado estático hecho en tiempo de compilación

Ejemplo:

{
  path: '',
  component: AppComponent,
  data: { renderMode: 'server' }
}

Añadir logs en AppComponent

Agrega un log en ngOnInit para ver dónde se inicializa el componente:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  ngOnInit() {
    console.log('App initialized');
  }
}

🔍 Verificar el tipo de renderizado

Usa la opción "Ver código fuente de la página" del navegador para ver si el HTML proviene del servidor.

En modo CSR:

• Solo verás un shell HTML (<app-root>).
• Todo el contenido se genera después de cargar el JavaScript.

En modo SSR:

• El código fuente muestra el contenido completo ya renderizado.
• Cada recarga muestra un nuevo log en la consola del servidor.

En modo Prerender:

• El contenido también aparece en el código fuente.
• Pero el log solo se muestra una vez, durante la compilación (ng build).

🛠️ Hydratación incremental en Angular v20

Una gran novedad en Angular v20 es la hydratación incremental.

🔍 Nota sobre Angular v20: La hydratación incremental permite activar partes específicas de la aplicación a medida que se vuelven visibles, mejorando el rendimiento percibido sin sacrificar la calidad del SSR.

🎯 ¿Cómo elegir entre SSR, CSR y Prerender?

| Caso de uso | Modo recomendado | |-------------|------------------| | Páginas dinámicas (blogs, productos, perfiles) | SSR | | Dashboards internos | CSR | | Páginas estáticas (aviso legal, FAQ) | Prerender | | Sitios con millones de visitantes | CSR o Prerender (menos carga para el servidor) |

📘 Próximo artículo: Bloques diferidos (defer blocks)

En el próximo episodio de esta serie, exploraremos los bloques diferidos (defer blocks), una característica poderosa de Angular que permite cargar ciertas partes de la aplicación solo cuando sean necesarias.
Veremos cómo funcionan con SSR y cómo pueden mejorar los tiempos iniciales de carga.

💬 Conclusión

Entender las distintas estrategias de renderizado en Angular te da flexibilidad para tomar decisiones informadas sobre rendimiento, SEO y experiencia de usuario.

Con Angular v20, el SSR es más accesible que nunca. No hay razón para no usarlo en aplicaciones públicas donde el SEO es fundamental.

¡Sigue atento a esta serie!