📊 Capítulo 18: SSR & Non-Destructive Hydration

Especialização em Frontend com Angular

🗺️ O Ciclo de SSR e Hidratação Não-Destrutiva no Angular 18

sequenceDiagram
    autonumber
    actor U as Usuário / Web Crawler
    participant S as Servidor Node.js (Angular SSR)
    participant B as Navegador do Cliente (Client Hydration)

    U->>S: GET /catalogo
    S->>S: Renderiza HTML estático completo no servidor com dados!
    S-->>U: Retorna HTML pronto (FCP imediato / SEO nota 100! ⚡)
    U->>B: Navegador exibe página visualmente completa
    B->>B: Baixa bundle JS em background
    B->>B: Non-Destructive Hydration anexa listeners aos nós existentes (Zero flicker de tela!)
    B-->>U: Página 100% interativa e reativa!

🎯 Slide 1: O Que é a Hidratação Não-Destrutiva?

No Angular Antigo: O cliente destruía o HTML vindo do servidor e redesenhava a tela do zero, gerando um piscar incômodo (flicker).
No Angular 17/18+: O Angular reutiliza os nós de DOM existentes na tela e apenas anexa os event listeners e signals sem repintar nada!

🎯 Slide 2: Habilitando a Hidratação em `app.config.ts`

export const appConfig: ApplicationConfig = {
  providers: [
    provideClientHydration(withEventReplay()), // Grava eventos do usuário antes do JS carregar!
  ],
};

🎯 Slide 3: Evitando Erros no Servidor

Nunca acesse window, document ou localStorage diretamente no construtor. Use afterNextRender ou injete PLATFORM_ID com isPlatformBrowser()!