Angular SSR e Incremental Hydration: Rendering del Lado del Servidor en 2025
El Server-Side Rendering (SSR) ha atravesado una transformación radical en Angular. Desde Angular Universal como paquete externo y experimental, el SSR es hoy una funcionalidad de primera clase integrada en el core del framework. Con Angular 19+ la introducción de la Incremental Hydration ha cambiado las reglas del juego: ya no es necesario hidratar toda la aplicación de una sola vez, sino solo las partes que el usuario efectivamente utiliza.
En este sexto artículo de la serie Angular Moderno exploraremos la arquitectura SSR de Angular desde la configuración base hasta las estrategias avanzadas de hydration incremental, event replay, prerendering estático y optimización SEO.
Lo Que Aprenderás en Este Artículo
- Cómo funciona el Server-Side Rendering en Angular y su evolución desde Angular Universal
- El mecanismo de Full Application Hydration: reutilización del DOM y replay de eventos
- Incremental Hydration con los triggers
@defer: viewport, interaction, idle, timer - Configuración completa SSR:
app.config.server.ts, servidor Express, providers - Event Replay e integración con jsaction para capturar interacciones durante la hydration
- Prerendering (SSG) para generación estática de páginas
- Optimización SEO con meta tags, structured data y rendering para crawlers
- Patrones prácticos:
isPlatformBrowser,TransferState, API browser-only
Panorámica de la Serie Angular Moderno
| # | Artículo | Enfoque |
|---|---|---|
| 1 | Angular Signals | Reactividad fine-grained |
| 2 | Zoneless Change Detection | Eliminar Zone.js |
| 3 | Nuevos Templates @if, @for, @defer | Control flow moderno |
| 4 | Standalone Components | Arquitectura sin NgModule |
| 5 | Signal Forms | Formularios reactivos con Signals |
| 6 | Estás aquí - SSR e Incremental Hydration | Server-Side Rendering |
| 7 | Core Web Vitals en Angular | Rendimiento y métricas |
| 8 | Angular PWA | Progressive Web App |
| 9 | Dependency Injection Avanzada | DI tree-shakable |
| 10 | Migrar de Angular 17 a 21 | Guía de migración |
1. Server-Side Rendering en Angular
El Server-Side Rendering consiste en generar el HTML de una página en el servidor en lugar de en el navegador. Cuando un usuario o un crawler solicita una página, el servidor ejecuta la aplicación Angular, produce el HTML completo y lo envía al cliente.
La Evolución: de Angular Universal al Core
Evolución del SSR en Angular
| Versión | Tecnología SSR | Características |
|---|---|---|
| Angular 2-16 | Angular Universal (@nguniversal) | Paquete externo, configuración manual, sin hydration |
| Angular 16 | Universal + Hydration (Developer Preview) | Primera hydration: reutilización del DOM server-rendered |
| Angular 17 | @angular/ssr (estable) | SSR integrado en el core, CLI genera la configuración |
| Angular 19+ | @angular/ssr + Incremental Hydration | Hydration parcial con @defer, event replay, SSG mejorado |
Configurar SSR en un Proyecto Nuevo
# Nuevo proyecto con SSR
ng new my-app --ssr
# Añadir SSR a un proyecto existente
ng add @angular/ssr
2. Full Application Hydration
La hydration es el proceso por el cual Angular "toma el control" del HTML generado por el servidor. En lugar de destruir el DOM y reconstruirlo, Angular reutiliza los nodos DOM existentes y les adjunta los event listeners y la lógica de la aplicación.
// app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
export const appConfig: ApplicationConfig = {
providers: [
provideClientHydration(
withEventReplay() // Captura eventos durante la hydration
),
provideRouter(routes),
provideHttpClient(),
]
};
3. Incremental Hydration con @defer
La Incremental Hydration permite hidratar solo las partes de la página que el usuario necesita,
usando los mismos triggers de @defer: viewport, interaction, idle, timer.
<!-- El componente de comentarios se renderiza en el servidor -->
<!-- pero se hidrata solo cuando entra en el viewport -->
@defer (hydrate on viewport) {
<app-comments [postId]="postId()" />
} @placeholder {
<div class="comments-skeleton">Cargando comentarios...</div>
}
<!-- Se hidrata cuando el usuario interactúa -->
@defer (hydrate on interaction) {
<app-search-bar />
}
<!-- Se hidrata cuando el navegador está inactivo -->
@defer (hydrate on idle) {
<app-sidebar-widgets />
}
<!-- Nunca se hidrata en el cliente (solo SSR) -->
@defer (hydrate never) {
<app-static-footer />
}
Triggers de Hydration Disponibles
| Trigger | Descripción | Caso de uso |
|---|---|---|
hydrate on viewport | Hidrata cuando el elemento es visible | Contenido below-the-fold |
hydrate on interaction | Hidrata al primer click/focus | Formularios, botones interactivos |
hydrate on idle | Hidrata cuando el navegador está inactivo | Widgets secundarios |
hydrate on timer(Ns) | Hidrata después de N segundos | Contenidos con retraso |
hydrate never | Nunca se hidrata | Contenido estático puro |
4. Prerendering (SSG)
{
"projects": {
"my-app": {
"architect": {
"build": {
"options": {
"prerender": {
"routesFile": "prerender-routes.txt"
}
}
}
}
}
}
}
5. Patrones Prácticos SSR
import { Component, inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
@Component({
selector: 'app-analytics',
standalone: true,
template: `<div>Analytics activo</div>`
})
export class AnalyticsComponent {
private platformId = inject(PLATFORM_ID);
ngOnInit() {
// Solo se ejecuta en el navegador, no en el servidor
if (isPlatformBrowser(this.platformId)) {
this.initAnalytics();
}
}
private initAnalytics() {
// APIs del navegador como window, document, localStorage
}
}
Resumen y Próximos Pasos
Conceptos Clave
- El SSR en Angular ahora está integrado en el core con
@angular/ssr - La Full Hydration reutiliza el DOM del servidor en lugar de recrearlo
- La Incremental Hydration con
@deferhidrata solo las partes necesarias - El Event Replay captura las interacciones del usuario durante el proceso de hydration
- El prerendering (SSG) genera HTML estático en tiempo de build
isPlatformBrowserprotege las API browser-only en el entorno del servidorTransferStateevita llamadas HTTP duplicadas entre servidor y clientehydrate nevermantiene componentes como HTML estático puro
En el próximo artículo exploraremos cómo optimizar los Core Web Vitals en Angular, las métricas de rendimiento que Google usa como factor de ranking y que impactan directamente en la experiencia del usuario.