# Server-Side Rendering & Hydration — Angular Fundamentals: Components, Signals and Routing

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

> Improve first load and SEO by rendering Angular on the server and hydrating it in the browser.

## Why SSR

A client-rendered app sends an empty shell, so users and crawlers wait for JavaScript. **Server-side rendering (SSR)** sends ready HTML, and **hydration** attaches event listeners to it in the browser instead of rebuilding the DOM. Static generation (**SSG**) renders pages at build time.

## Enable SSR and hydration

New projects can be created with SSR, and existing ones can add it with a 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())]
```

Avoid touching `window` or `document` directly in components that render on the server. Guard browser-only code with `afterNextRender` or `isPlatformBrowser`.