Detailed explanation of basic concepts of Hydration in Angular applications

Hydration concept for Angular applications

The concept of Hydration is a key concept in Angular applications, which involves how the Angular framework works in client-side rendering (CSR). To understand Hydration in depth, you first need to understand the basic differences between CSR and SSR (Server-side rendering) and how Angular uses Hydration to improve CSR performance. This article will explain the concept of Hydration in Angular applications in detail and illustrate it with examples.

The basic difference between CSR and SSR

Before understanding Hydration, let's briefly review the basic differences between CSR and SSR.

CSR（Client-side Rendering）: In CSR, the entire application build and rendering happens in the client browser. When a user accesses a CSR application, the browser downloads the application's JavaScript code and executes the code on the user's device to render the page. The advantage of this approach is that it can achieve dynamic interaction on the client side, but it also has performance challenges, because it requires downloading a large amount of JavaScript code when loading for the first time, resulting in a longer page loading time.
SSR（Server-side Rendering）: In SSR, when the server receives a client request, it pre-renders the HTML content on the server and sends it to the client browser. This means that users will see the content faster because they don't have to wait for a lot of JavaScript code to download and execute. However, compared with CSR, SSR may cause increased server load in complex applications and have certain limitations on implementing certain interactive functions.

Angular's CSR and SSR

Angular supports two rendering modes: CSR and SSR. By default, Angular applications adopt CSR mode, which means the entire rendering process occurs on the client. But in some cases, if you need better first-screen loading performance or SEO (search engine optimization) requirements, you can choose to use SSR.

In Angular, CSR applications are usually launched using the following methods:

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => (err));

The SSR application is started using the following method:

platformServer().bootstrapModule(AppModule)
  .then(moduleRef =&gt; {
    const appRef = (ApplicationRef);
    const state = (PlatformState);
    (
      first(isStable =&gt; isStable === true),
    ).subscribe(() =&gt; {
      ().then(html =&gt; {
        (html); // HTML rendered on the server        ();
      });
    });
  });

In CSR mode, the initial loading of an Angular application will include some basic HTML structure and a JavaScript package (usually containing the entire application's code), and then run this code in the browser to render the full page.

But there is a performance issue here: the download and execution of JavaScript packages may take some time, during which the user will see a blank page or load indicator. This is exactly the starting point of the Hydration concept.

Behind the Hydration concept

The core idea of Hydration is to display content as soon as possible in a CSR application without having to wait for the download and execution of the entire JavaScript package. To do this, Angular introduces a mechanism that enables applications to load and fill content step by step on the browser side.

Specifically, when the Angular application starts in CSR mode, it embeds some initial HTML content into the server-generated HTML, which is immediately displayed on the browser side. The JavaScript package is then downloaded and executed in the background. Once the JavaScript package is downloaded and ready, it "hydrates" these initial HTML content, which is to convert it into interactive Angular components.

This means that users can still interact with content on the page while waiting for the JavaScript package to be downloaded and executed. The benefit of Hydration is that it improves user-aware loading speeds, as the page displays content early, while still allowing applications to load and initialize in the background.

How Hydration works

To understand how Hydration works, let's take a deeper look at its steps:

Server-side rendering (SSR) generates initial HTML: In server-side rendering, the initial HTML content of the Angular application is generated and contains some special tags to identify which parts need to be hydrated.
Initial HTML sent to the client: The generated initial HTML content will be sent to the client browser with the response.
Download JavaScript package on the client: The browser starts downloading the JavaScript package of the Angular application, which contains the application's code, components and modules.
Execution of JavaScript packages: Once the JavaScript package is downloaded, the browser will start executing it. During execution, the Angular framework recognizes special tags in the initial HTML and then converts these tags into Angular components.
Hydration: When the Angular framework hydrates the initial HTML content, it replaces the content with the actual Angular components and establishes the ability to interact with these components. This means that users can interact with content on the page without having to wait for the entire JavaScript package to load and execute.

Hydration example

To better understand Hydration, let's demonstrate how it works with a simple example. Suppose we have an Angular application with a simple component to display the user's

Name. The initial HTML of this component might look like this:

&lt;!-- initialHTML --&gt;
&lt;app-root&gt;
  &lt;app-user-name&gt;Loading...&lt;/app-user-name&gt;
&lt;/app-root&gt;

In this example,<app-user-name>is an Angular component that displays the user's name. The initial HTML contains a placeholder text "Loading..." because the JavaScript package has not been downloaded and executed before hydration.

Now let's see how Hydration is applied to this example:

Server-side rendering (SSR) generates the initial HTML and sends it to the client.

&lt;!-- The initial server generationHTML --&gt;
&lt;app-root&gt;
  &lt;app-user-name _nghost-abc123&gt;John Doe&lt;/app-user-name&gt;
&lt;/app-root&gt;

In this HTML we can see<app-user-name>The content of the component has been populated with "John Doe" and has a special property_nghost-abc123, it is used to identify this component.

The client browser starts downloading the JavaScript package.
During the execution of the JavaScript package, the Angular framework detects a special tag in the initial HTML.
The Angular framework replaces special tags in the initial HTML with the actual Angular component and establishes interaction.

&lt;!-- After hydrationHTML --&gt;
&lt;app-root&gt;
  &lt;app-user-name _nghost-abc123 _ngcontent-def456&gt;John Doe&lt;/app-user-name&gt;
&lt;/app-root&gt;

In this HTML,<app-user-name>The component has been replaced with an Angular interactive component and has two special properties_nghost-abc123and_ngcontent-def456, They are used to ensure the style isolation of components.

Now users can interact with content on the page without having to wait for the entire JavaScript package to load and execute.

Advantages and application scenarios of Hydration

The main advantage of Hydration is that it improves user-aware loading speed, especially for CSR applications. Users can see and interact with the content on the page faster without having to wait for the entire JavaScript package to be downloaded and executed.

Hydration is particularly useful in the following situations:

Improve first-screen loading performance: For applications that want to quickly display content to users, Hydration can significantly improve the first-screen loading performance and improve user experience.
Improve SEO: For applications that require SEO, Hydration ensures that search engine crawlers can see the initial content of the page without having to wait for JavaScript to execute. This can improve search engine rankings.
Gradually enhanced: Hydration supports progressively enhanced policies, and the page still works properly even if JavaScript loading fails or is disabled, because the initial content is already generated when rendering on the server side.

Hydration Challenges and Considerations

Although Hydration offers many performance benefits, there are some challenges and things to note:

Additional complexity: Implementing Hydration requires introducing additional complexity into Angular applications, including adding special tags to the initial HTML to identify the parts that need to be hydrated.
Code splitting: To achieve better Hydration effects, it is often necessary to split the application's code into small pieces to download and execute key parts faster.
Performance monitoring: The performance of Hydration needs to be monitored to ensure that the download and execution of JavaScript packages do not cause performance problems.
Initial state synchronization: Ensure that the content in the initial HTML is synchronized with the state of subsequent JavaScript executions to avoid inconsistencies.

in conclusion

Hydration is a key concept in Angular applications that allows for improved user-aware loading speed in CSR mode while preserving the interactiveness of the application. By adding special tags to the initial HTML, Angular can display the page content as early as possible while downloading and executing JavaScript packages in the background.

The implementation of Hydration requires some complexity and consideration, but it can improve first-screen loading performance, improve SEO, support progressive enhancement strategies, etc. Understanding the working principles and application scenarios of Hydration can help developers better optimize the performance and user experience of Angular applications.

The above is a detailed explanation of the basic concept of Hydration in Angular applications. For more information about the concept of Angular Hydration, please follow my other related articles!