Skip to content

Commit e39efe7

Browse files
authored
Merge pull request #76 from sangy987/master
added angular hydration
2 parents 51310b7 + 075483d commit e39efe7

File tree

1 file changed

+31
-0
lines changed

1 file changed

+31
-0
lines changed

README.md

+31
Original file line numberDiff line numberDiff line change
@@ -300,6 +300,7 @@
300300
|276| [What is standalone component?](#what-is-standalone-component)|
301301
|277| [How to create a standalone component uing CLI command?](#how-to-create-a-standalone-component-uing-cli-command)
302302
|278| [How to create a standalone component manually?](#how-to-create-a-standalone-component-manually)
303+
|279| [What is hydration ?](#what-is-hydration)
303304
|279| [](#)
304305

305306
1. ### What is Angular Framework?
@@ -4687,4 +4688,34 @@
46874688
export class AppModule {}
46884689
```
46894690
4691+
**[⬆ Back to Top](#table-of-contents)**
4692+
278. ### What is hydration?
4693+
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.
4694+
4695+
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.
4696+
4697+
```typescript
4698+
import {
4699+
bootstrapApplication,
4700+
provideClientHydration,
4701+
} from '@angular/platform-browser';
4702+
4703+
bootstrapApplication(RootCmp, {
4704+
providers: [provideClientHydration()]
4705+
});
4706+
```
4707+
Alternatively we can add `providers: [provideClientHydration()]` in the App Module
4708+
```typescript
4709+
import {provideClientHydration} from '@angular/platform-browser';
4710+
import {NgModule} from '@angular/core';
4711+
4712+
@NgModule({
4713+
declarations: [RootCmp],
4714+
exports: [RootCmp],
4715+
bootstrap: [RootCmp],
4716+
providers: [provideClientHydration()],
4717+
})
4718+
export class AppModule {}
4719+
```
4720+
46904721
**[⬆ Back to Top](#table-of-contents)**

0 commit comments

Comments
 (0)