Angular Hydration Presentation (FrontEnd)

Angular Hydration Presentation (FrontEnd)

• 1.
  Angular Hydration Alka Vats& Anuj Tomar
• 2.
  Lack of etiquetteand 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.
• 3.
  1. What isAngular Hydration? 2. Why is Hydration Important? 3. How Angular Hydration Works 4. Implementation 5. Constraints of Hydration 6. Demo
• 4.
  01
• 5.
  What is AngularHydration?  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.
• 6.
  02
• 7.
  Why is HydrationImportant?  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.
• 8.
  03
• 9.
  How Angular HydrationWorks  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.
• 10.
  04
• 11.
  Implementation  Enable Server-siderendering  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
• 12.
   If youhave 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()] });
• 13.
   Alternatively, ifyou 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 {}
• 14.
  05
• 15.
  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 >
• 16.
   Preserve WhitespacesConfiguration  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.
• 17.
  06