Angular Hydration Presentation (FrontEnd)

Angular Hydration
Alka Vats & Anuj Tomar

Lack of etiquette and manners is a huge turn off.
KnolX Etiquettes
 Punctuality
Join the session 5 minutes prior to the session start time. We start on
time and conclude on time!
 Feedback
Make sure to submit a constructive feedback for all sessions as it is very
helpful for the presenter.
 Silent Mode
Keep your mobile devices in silent mode, feel free to move out of session
in case you need to attend an urgent call.
 Avoid Disturbance
Avoid unwanted chit chat during the session.

1. What is Angular Hydration?
2. Why is Hydration Important?
3. How Angular Hydration Works
4. Implementation
5. Constraints of Hydration
6. Demo

What is Angular Hydration?
 Angular Hydration is the process where a server-rendered HTML page is transformed into a fully
interactive Angular application on the client side.
 The server sends a fully-rendered HTML page to the client. Angular then takes over by attaching
event listeners and making the page interactive, effectively transforming static content into a
dynamic application.

Why is Hydration Important?
 Performance Benefits:
 Faster Initial Load: Server-side rendering provides a fully-rendered HTML page to the user, reducing
the time to first paint (TTFP).
 SEO Improvements: Search engines can crawl and index the server-rendered content, improving
search engine optimization (SEO).
 Improved User Experience: Users see the content faster, leading to better engagement and lower
bounce rates.
 Challenges without Hydration:
 Slow Initial Load: Applications relying solely on client-side rendering can have slower initial load times.
 SEO Limitations: Client-side rendered content can be less effective for SEO, as search engines might
not index JavaScript-heavy pages well.
 User Perception: Delayed content visibility can lead to higher bounce rates and lower user satisfaction.

How Angular Hydration Works
 Process Overview:
 Server-Side Rendering (SSR): The server generates the initial HTML of the Angular application.
 Hydration: The client-side Angular framework bootstraps and rehydrates the server-rendered HTML,
attaching event listeners and making it interactive.
 Steps:
 Initial Server Render: The Angular application is rendered on the server and sent to the client as
HTML.
 Sending HTML to Client: The client receives a fully-rendered HTML page.
 Angular Bootstrapping: Angular bootstraps the application on the client side, making the static HTML
interactive by attaching event listeners and other Angular functionalities.
 Rehydration Process: Angular verifies the server-rendered content, binds it to the client-side Angular
components, and activates event listeners.

Implementation
 Enable Server-side rendering
 To create a new project with SSR, run:
$ ng new –ssr
 To add SSR to an existing project, use the Angular CLI ng add command.
$ ng add @angular/ssr

 If you have a custom setup and didn't use Angular CLI to enable SSR, you can enable hydration manually by
visiting your main application component or module and
importing provideClientHydration from @angular/platform-browser. You'll then add that provider to your
app's bootstrapping providers list.
import {
bootstrapApplication,
provideClientHydration,
} from '@angular/platform-browser';
…
bootstrapApplication(AppComponent, {
providers: [provideClientHydration()]
});

 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';
@NgModule({
declarations: [AppComponent],
exports: [AppComponent],
bootstrap: [AppComponent],
providers: [provideClientHydration()],
})
export class AppModule {}

Constraints of Hydration
 Direct DOM Manipulation
 If you have components that manipulate the DOM using native DOM APIs, innerHTML or outerHTML,
the hydration process will encounter errors.
 Valid HTML Structure
 There are a few cases where if you have a component template that does not have a valid HTML
structure, this could result in a DOM mismatch error during hydration.
 For example, here are some of the most common cases of this issue.
 < table > without a < tbody >
 < div > inside a < p >
 < a > inside an < h1 >
 < a > inside another < a >

 Preserve Whitespaces Configuration
 When using the hydration feature, we recommend using the default false setting for
preserveWhitespaces. If this setting is not in your tsconfig, the value will be false, and no changes are
required. If you choose to enable preserving whitespaces by adding preserveWhitespaces: true to your
tsconfig, you may encounter issues with hydration.
 Support for i18N
 Angular v17 still doesn’t support internationalization with hydration, but support is in progress.
Components using i18N blocks will have hydration skipped.
 Third-Party Libraries with DOM Manipulation
 Several third-party libraries depend on DOM manipulation to be able to render. D3 charts are a prime
example. These libraries worked without hydration but may cause DOM mismatch errors when hydration
is enabled. Use ngSkipHydration on the component using such libraries to bypass hydration.

Angular Hydration Presentation (FrontEnd)

Angular Hydration Presentation (FrontEnd)

More Related Content

More from Knoldus Inc. (20)

Recently uploaded (20)

Angular Hydration Presentation (FrontEnd)