How does Hydration work in modern Angular SSR, and what is non-destructive hydration?

import { bootstrapApplication, provideClientHydration } from '@angular/platform-browser';
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: '<h1>Hydration Active</h1>'
})
export class AppComponent {}

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