SSR e hidratación incremental

Una SPA normal envía al navegador una página casi vacía y un montón de JavaScript que la rellena —lo que retrasa el primer contenido y perjudica el SEO—. El renderizado en servidor (SSR) le da la vuelta: el servidor genera el HTML ya poblado, el usuario ve contenido al instante, y luego Angular lo "hidrata" para hacerlo interactivo. Hoy entiendes SSR, la hidratación y su versión moderna e incremental —claves para apps rápidas y bien posicionadas—.

El restaurante con la comida ya servida

Qué resuelve el SSR

Activar SSR en Angular

La CLI lo configura al crear el proyecto (ng new --ssr) o después (ng add @angular/ssr). En la configuración de la app, habilitas la hidratación:

import { ApplicationConfig } from '@angular/core';
import { provideClientHydration, withEventReplay } from '@angular/platform-browser';

export const appConfig: ApplicationConfig = {
providers: [
  provideClientHydration(
    withEventReplay(),   // reproduce los clics ocurridos antes de hidratar
  ),
],
};

provideClientHydration() activa la hidratación: en vez de tirar el HTML del servidor y re-renderizar desde cero (lo que causaba parpadeos), Angular REUTILIZA el HTML existente y solo le "conecta" la interactividad. withEventReplay() guarda los clics que el usuario hizo ANTES de que la hidratación terminara y los reproduce después —para que no se pierdan—.

Hidratación: del HTML estático al interactivo

Hidratación incremental: lo último

Mini-reto

Para cada página de "Mi Bolsillo", decide si SSR aporta y por qué: 1) una landing pública de marketing; 2) el dashboard privado de gastos (tras login); 3) una página de "compartir reporte" con una URL pública. Luego explica, con tus palabras, qué vería el usuario en el primer instante CON y SIN SSR en la landing.

Qué sigue

Tu app carga rápido y se indexa bien. La próxima lección profundiza en el RENDIMIENTO en tiempo de ejecución: el modo zoneless (que ya conociste con las señales), cómo medir con el Profiler, y por qué las señales hacen tu app rápida por defecto. Optimizar con datos, no a ciegas.