Angular SSR et Incremental Hydration : Rendu Côté Serveur en 2025
Le Server-Side Rendering (SSR) a traversé une transformation radicale dans Angular. Depuis Angular Universal comme package externe et expérimental, le SSR est aujourd'hui une fonctionnalité de première classe intégrée au cœur du 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.
Dans ce sixième article de la série Angular Moderno exploraremos la arquitectura SSR de Angular desde la configuration base hasta las estrategias avanzadas de hydration incremental, event replay, prerendering estático y optimización SEO.
Ce Que Vous Apprendrez dans Cet Article
- Comment fonctionne 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 - Configuration 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
Panorama de la Série Angular Moderne
| # | Article | Thème |
|---|---|---|
| 1 | Angular Signals | Réactivité fine-grained |
| 2 | Zoneless Change Detection | Supprimer Zone.js |
| 3 | Nuevos Templates @if, @for, @defer | Control flow moderne |
| 4 | Standalone Components | Architecture sans NgModule |
| 5 | Signal Forms | Formulaires réactifs avec Signals |
| 6 | Vous êtes ici - SSR e Incremental Hydration | Server-Side Rendering |
| 7 | Core Web Vitals en Angular | Performance et métriques |
| 8 | Angular PWA | Progressive Web App |
| 9 | Dependency Injection Avanzada | DI tree-shakable |
| 10 | Migrer de Angular 17 a 21 | Guide de migration |
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
| Version | Technologie SSR | Caractéristiques |
|---|---|---|
| Angular 2-16 | Angular Universal (@nguniversal) | Package externe, configuration manual, sans hydration |
| Angular 16 | Universal + Hydration (Developer Preview) | Primera hydration: reutilización del DOM server-rendered |
| Angular 17 | @angular/ssr (estable) | SSR intégré au cœur, CLI génère la configuration |
| Angular 19+ | @angular/ssr + Incremental Hydration | Hydration partielle con @defer, event replay, SSG amélioré |
Configurer 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 | Description | Cas d'utilisation |
|---|---|---|
hydrate on viewport | Hidrata cuando el elemento es visible | Contenu 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 | Contenus con retraso |
hydrate never | Nunca se hidrata | Contenu 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() {
// S'exécute uniquement dans le navigateur, no en el servidor
if (isPlatformBrowser(this.platformId)) {
this.initAnalytics();
}
}
private initAnalytics() {
// APIs du navigateur como window, document, localStorage
}
}
Résumé et Prochaines Étapes
Concepts Clés
- 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
Dans le prochain article, nous explorerons comment optimizar los Core Web Vitals en Angular, las métricas de performance que Google usa como factor de ranking y que impactan directamente en la experiencia del usuario.