Thought Leadership
Apr 20, 2023

Revolutionize Your Angular SSR Experience with Non-Destructive Hydration

Angular 16 finally quenches our thirst for this feature that revolutionizes server-side rendering
Revolutionize Your Angular SSR Experience with Non-Destructive Hydration

Angular 16’s release candidate introduces a long-awaited feature that will revolutionize the Angular SSR experience: non-destructive hydration.

This feature has the potential to improve Core Web Vitals scores, increase SEO performance, and even get rid of the dreaded ‘flicker’ from Angular Universal applications. The Angular team recently confirmed that improving Server Side Rendering is a top priority in 2023 and that non-destructive hydration is a stepping stone towards their vision for the future.

This post covers three aspects of non-destructive hydration: (1) an example of the old Angular Universal ‘flicker’, (2) a quick introduction on how to use non-destructive hydration, and (3) a glossary with explanations of a few keys terms.

1. The Flicker

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

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. Angular Universal co-creator Jeff Whelpley gives an entertaining example of destructive hydration in this talk at NG-BE 2023.

Non-destructive hydration, on the other hand, allows Angular to re-use server-side rendered DOM. Which means no flicker!

Removing the flicker is more than a UX bugfix, it represents a fundamental improvement in Angular’s SSR. It means that Angular is able to avoid extra work to re-create DOM nodes so users get a faster Largest Contentful Paint.

2. Usage

Create a new Angular application and add Angular Universal.

Then, add provideClientHydration() to the app.config.ts file.

If you’re interested in an in-depth guide on setting up an application with non-destructive hydration, check out this video by Brandon Roberts.

3. Glossary

Below is a glossary of key terms related to non-destructive hydration:

Server Side Rendering

By default, Angular renders applications only in a browser. Angular Universal allows Angular to render an application on the server, generating static HTML contents, which represents an application state. Once the HTML contents is rendered in a browser, Angular bootstraps an application and reuses the information available in the server-generated HTML.

https://next.angular.io/guide/universal

Hydration

Hydration is the process that restores the server side rendered application on the client. This includes things like reusing the server rendered DOM structures, persisting the application state, transferring application data that was retrieved already by the server, and other processes.

https://next.angular.io/guide/hydration#what-is-hydration

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.

https://next.angular.io/guide/roadmap#in-progress

Disclaimer: Angular [16.0.0-rc.0](<https://www.npmjs.com/package/@angular/core/v/16.0.0-rc.0>) was the latest v16 release candidate at the time of writing this article. Release candidates of Angular should not be run in any production application or environment.

. . .
About HeroDevs

HeroDevs partners with open-source authors to offer comprehensive solutions for sunsetted open-source software. Our Never-Ending Support products ensure businesses remain secure and compliant, even as their depended-upon open-source packages reach end-of-life. Alongside this, our elite team of software engineers and architects provides expert consulting and engineering services, assisting clients in migrating from deprecated packages and modernizing their technology stacks.

Article Summary
Discover Angular 16's non-destructive hydration for SSR, enhancing Core Web Vitals and eliminating flicker in Angular Universal apps.
Author
Edward Ezekiel
Solutions Architect
Related Articles
Executive Order 14028: Elevating National Cybersecurity
The White House's Call to Action for a Safer Digital Future Setting New Benchmarks for Global Cybersecurity Standards
PCI Compliance: What Every Business Owner Needs to Know
Understanding the Essentials of Payment Security and PCI DSS Integration
Navigating Drupal 7 End-of-Life: Your Options and HeroDevs' Never-Ending Support
Explore paths for Drupal 7 users, from upgrading to newer versions to leveraging ongoing support with HeroDevs.