Skip to content

Commit

Permalink
added angular hydration
Browse files Browse the repository at this point in the history
  • Loading branch information
sangy987 committed May 8, 2023
1 parent 51310b7 commit 075483d
Showing 1 changed file with 31 additions and 0 deletions.
31 changes: 31 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -300,6 +300,7 @@
|276| [What is standalone component?](#what-is-standalone-component)|
|277| [How to create a standalone component uing CLI command?](#how-to-create-a-standalone-component-uing-cli-command)
|278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually)
|279| [What is hydration ?](#what-is-hydration)
|279| [](#)

1. ### What is Angular Framework?
Expand Down Expand Up @@ -4687,4 +4688,34 @@
export class AppModule {}
```
**[⬆ Back to Top](#table-of-contents)**
278. ### What is hydration?
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.
To enable hydration, we have to enable server side rendering or Angular Universal. Once enabled, we can add the following piece of code in the root component.
```typescript
import {
bootstrapApplication,
provideClientHydration,
} from '@angular/platform-browser';

bootstrapApplication(RootCmp, {
providers: [provideClientHydration()]
});
```
Alternatively we can add `providers: [provideClientHydration()]` in the App Module
```typescript
import {provideClientHydration} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
@NgModule({
declarations: [RootCmp],
exports: [RootCmp],
bootstrap: [RootCmp],
providers: [provideClientHydration()],
})
export class AppModule {}
```
**[⬆ Back to Top](#table-of-contents)**

0 comments on commit 075483d

Please sign in to comment.