With wider availability of fast internet and increased use of mobile devices, use of mobile devices to access web application has increased. As a result, for a development team one of the major concerns is to optimize application for mobile devices. In this context Server-side rendering (SSR) of applications are getting a lot of traction these days.

Let’s understand what Server-side rendering (SSR) is in the context of web application –

Server-side rendering is an approach where complete web page is rendered from server i.e., server sends fully rendered HTML page (including necessary CSS and scripts) to browser. The page is visible to end user without waiting for any other JavaScript & CSS files to load.

Server-side rendering brings benefits such as – Improved performance, Search engine friendliness, Battery efficiency, and relatively reduced device requirement in rendering.

Angular & Server-side rendering
Angular has been supporting server-side rendering (SSR) from a long time. However, the framework has taken a DOM re-construction approach i.e., though the DOM was rendered from server side, once JavaScript kicked in on browser, JavaScript re-creates the markup and replaces the server side rendered markup. This duplication of markup generation many of the times resulted in flicker while rendering and impacts web page performance as well.

Angular 16 brings Hydration
The latest released version of Angular V16 has released Hydration as developer preview.

Excerpts from Angular documentation –

“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.”

Reference – https://angular.io/guide/hydration

Benefits of Hydration
With the introduction of Hydration, Angular re-uses the server-side generated DOM structure on client side instead of destroying server-side generated DOM structure and re-creating it on client side. This re-use not only addresses the flicker issue, but also improves the application performance as well, enhancing overall user experience.

Points to consider
For hydration to work without any error, client and server-side generated DOM should be identical. The development team should make sure to follow best practices related to DOM manipulation. For example – DOM manipulation should be done only through Angular APIs, and DOM structure should be valid.

Final word
Hydration, though in developer preview, is a good feature made available with Angular 16. Hydration will help to create more performant web applications and enhance end user experience.