# Server-Side Rendering और Hydration — Angular Fundamentals: Components, Signals और Routing

Source: https://www.geekswithgeeks.com/hi/angular/ng-ssr-hydration

> Angular को server पर render करके और browser में hydrate करके पहला load और SEO सुधारें।

## SSR क्यों

Client-rendered app खाली shell भेजता है, इसलिए users और crawlers JavaScript का इंतज़ार करते हैं। **Server-side rendering (SSR)** तैयार HTML भेजता है, और **hydration** DOM दोबारा बनाने के बजाय browser में उस पर event listeners जोड़ता है। Static generation (**SSG**) build समय पर pages render करता है।

## SSR और hydration चालू करें

नए projects SSR के साथ बनाए जा सकते हैं, और मौजूदा projects schematic से इसे जोड़ सकते हैं।

```bash
ng new my-app --ssr          # new project with SSR
ng add @angular/ssr          # add to an existing app

# app.config.ts
# providers: [provideClientHydration(withEventReplay())]
```

Server पर render होने वाले components में `window` या `document` सीधे उपयोग न करें। Browser-only code को `afterNextRender` या `isPlatformBrowser` से सुरक्षित करें।