DEV Community

Askar Musthaffa
Askar Musthaffa

Posted on

Revolutionizing Web Rendering with Angular Hydration for Superior User Experiences in Angular 16

Angular 16 introduces non-destructive hydration, revolutionizing Angular SSR with awaited improvements.

The Angular team prioritizes enhancing Server Side Rendering in 2023, aiming to improve Core Web Vitals scores, SEO performance, and eliminate 'flicker' in Angular Universal applications. They consider non-destructive hydration as a crucial step towards their future vision.

Issue with classic SSR (Destructive Hydration)

If you’ve ever used an Angular Universal application you may have come across the ‘flicker’:

Image description
Angular Universal’s ‘flicker’ effect when using destructive hydration

This flicker occurs because Angular Universal uses destructive hydration by default. When an Angular application is Server Side Rendered, a static HTML file is immediately sent to the client on page load. This provides a faster First Contentful Paint than traditional SPAs because template is displayed before application code is downloaded.

With destructive hydration, as soon as the client code is bootstrapped it blows away the server-rendered DOM and replaces it with client-rendered DOM. That’s what causes the flicker.

Non-Destructive Hydration

This technique will allow us to reuse the server-side rendered DOM and rather than rerendering it only attach event listeners and create data structures required by the Angular runtime.

How do you enable hydration in Angular

Once you have SSR working with your application, you can enable hydration by visiting your main app component or module and importing provideClientHydration from @angular/platform-browser. You'll then add that provider to your app's bootstrapping providers list.

import {
} from '@angular/platform-browser';

bootstrapApplication(RootCmp, {
  providers: [provideClientHydration()]
Enter fullscreen mode Exit fullscreen mode

Alternatively if you are using NgModules, you would add provideClientHydration to your root app module's provider list.

import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';

declarations: [RootCmp],
exports: [RootCmp],
bootstrap: [RootCmp],
providers: [provideClientHydration()],
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

New non-destructive hydration's impressive results: Lighthouse metrics of example application shown in two figures.

Classic SSR - Destructive Hydration:

Image description

SSR with Non-Destructive Hydration

Image description

Top comments (0)