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 brings benefits such as – Improved performance, Search engine friendliness, Battery efficiency, and relatively reduced device requirement in rendering.
Angular & Server-side rendering
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.
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.