Skip to content

Commit 075483d

Browse files
committed
added angular hydration
1 parent 51310b7 commit 075483d

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)