SSR e hidratación | Neural UI v2

Configura una aplicación Angular SSR

Añade SSR con Angular CLI si la aplicación todavía no lo tiene. En app.config.ts, coloca provideClientHydration(withEventReplay()) dentro de providers. Esta configuración compartida completa conserva la entrada de servidor y app.config.server.ts generadas por Angular. Neural no activa la hidratación implícitamente.

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

export const appConfig: ApplicationConfig = {
  providers: [provideClientHydration(withEventReplay())],
};

Añade renderizado en servidor

Utiliza este comando solo si SSR no está configurado. Conserva la configuración de servidor generada por Angular. La receta del primer componente proporciona el componente raíz y una interacción observable.

npx ng add @angular/ssr@22

Conserva un estado inicial coherente

Utiliza los mismos datos, modo visual y ajustes regionales iniciales en servidor y navegador. Configura locale/timeZone solo cuando un componente necesite esas decisiones de formato. Una fecha civil no es un instante convertido de zona horaria.

Si la interfaz inicial depende del reloj, transfiere un timestamp inicial de aplicación y proporciona now a partir del mismo valor. No generes una hora actual independiente en servidor y navegador. Las APIs del navegador pertenecen a su fase de render, por ejemplo afterNextRender.

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

@Component({
  selector: 'app-browser-width',
  template: '<output>{{ width() }}</output>',
})
export class BrowserWidth {
  readonly width = signal<number | null>(null);
  constructor() {
    afterNextRender(() => this.width.set(window.innerWidth));
  }
}

Comprueba HTML, hidratación e interacción

1. Compila la aplicación Angular. 2. Revisa la respuesta del documento: Button y su resultado deben existir antes de ejecutar JavaScript. 3. Carga la página normalmente y pulsa Button: el contador debe actualizarse. 4. Revisa la consola para detectar errores de hidratación o aplicación.

Repite con los locales que admita tu aplicación. Un HTML estático útil no demuestra por sí solo que funcionen hidratación y eventos. Prueba overlays tras hidratar con sus contratos de estado y foco.