[Solved] bootstrapApplication(AppComponent, { providers: [provideClientHydration()] });Assuming AppComponent renders server HTML, what is the expected behavior on the client? | Angular

Angular - Server-Side Rendering

Given this code snippet, what will happen when hydration is enabled?

bootstrapApplication(AppComponent, { providers: [provideClientHydration()] });

Assuming AppComponent renders server HTML, what is the expected behavior on the client?

AAngular will attach event listeners and make the existing server HTML interactive without full re-render.

BAngular will ignore the server HTML and load a blank page.

CAngular will re-render the entire component from scratch on the client.

DAngular will throw a runtime error because hydration is experimental.

Step-by-Step Solution

Solution:

Step 1: Understand hydration effect on client
With hydration enabled, Angular reuses server-rendered HTML and attaches client logic without full re-render.
Step 2: Analyze options
Angular will attach event listeners and make the existing server HTML interactive without full re-render. correctly describes this behavior; others describe re-render, error, or ignoring HTML which are incorrect.
Final Answer:
Angular will attach event listeners and make the existing server HTML interactive without full re-render. -> Option A
Quick Check:
Hydration = reuse server HTML + add interactivity [OK]

Quick Trick: Hydration attaches interactivity, no full re-render [OK]

Common Mistakes:

Master "Server-Side Rendering" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this code snippet, what will happen when hydration is enabled?