SSR and hydration | Neural UI v2

Configure an Angular SSR application

Add SSR with Angular CLI if the application does not already have it. In app.config.ts, place provideClientHydration(withEventReplay()) inside providers. This complete browser/shared configuration preserves Angular’s generated server entry and app.config.server.ts. Neural does not enable hydration implicitly.

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

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

Add server rendering

Use this command only if SSR is not configured. Keep the Angular-generated server setup. The First component recipe supplies the root component and observable interaction.

npx ng add @angular/ssr@22

Keep initial state consistent

Use the same initial data, selected mode and regional settings on server and browser. Configure locale/timeZone only when a component needs those formatting decisions. A civil date is not a timezone-converted instant.

If initial UI depends on the clock, transfer an application-owned initial timestamp and supply now from that same value. Do not serialize a fresh current time independently on server and browser. Browser APIs belong in a browser render phase, such as 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));
  }
}

Verify HTML, hydration and interaction

1. Build the Angular application. 2. Inspect the document response: the Button and result should exist before JavaScript runs. 3. Load the page normally and click the Button; its counter must update. 4. Check the browser console for hydration or application errors.

Repeat for the locales your application supports. A useful static HTML page alone does not prove that hydration and events work. Test overlays after hydration using their own state and focus contracts.