Angular · Theory

SSR & Hydration

Theory

39/43

SSR & Hydration

SSR & Hydration (and) is a Angular topic. In plain words you use it for first paint of /marks in a public site. Don’t start with a slogan — start with that picture.

Smallest example: isPlatformBrowser + afterNextRender. Type it, run it, and say what you see. If you can do that from memory, you know SSR & Hydration (and).

From the example next to this theory — SSR & Hydration: toggle open.

Trap — using window in the constructor. Fix that before you talk about advanced Angular.

Viva — what is SSR & Hydration (and)? Then show isPlatformBrowser + afterNextRender. Then name the trap.

Exam tip

What is SSR & Hydration (and)? Show this: isPlatformBrowser + afterNextRender. Trap: using window in the constructor.

Example

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  template: `
    <h1>{{ title }}</h1>
    <button (click)="toggle()">Toggle</button>
    <p *ngIf="open">Panel open</p>
  `,
})
export class AppComponent {
  title = "Angular practice";
  open = true;
  toggle() {
    this.open = !this.open;
  }
}

SSR & Hydration: toggle open. Say whether the panel is on screen after one click.

Short notes

DefSSR & Hydration (and) — first paint of /marks in a public site.
RuleisPlatformBrowser + afterNextRender
Trapusing window in the constructor
Usea public site

import { Component } from "@angular/core"; @Component({ selector: "app-root", template: ` <h1>{{ title }}</h1> <button (click)="toggle()">Toggle</button> <p *ngIf="open">Panel open</p> `, }) export class AppComponent { title = "Angular practice"; open = true; toggle() { this.open = !this.open; } }

SSR & Hydration

Example

Short notes

Questions

SSR & Hydration

Example

Short notes

Questions