Angular Performance Tips

The Problem

Without hydration, users have to wait for data to load before seeing any content. This creates a poor user experience with blank screens during data fetching.

Issues:

Blank screen during data loading
Poor First Contentful Paint (FCP)
High Largest Contentful Paint (LCP)
No progressive enhancement

Problematic Code:


          @Component({
  template:
    <div *ngIf="cards">
    @for (card of cards; track card.id) {
        <div class="card">...</div>
      }
    </div>
  })
export class Component {
  cards: Card[] | null = null;

  constructor() {
    // Wait for data before showing anything
    this.loadData();
  }
}

Refresh the page and notice how there's a 3-second blank screen before any content appears.