Angular Performance Tips

The Solution

With hydration, the server pre-renders the HTML and sends it immediately. The page is interactive once JavaScript loads, but users can see content right away.

Don't forget to enable the hydration provider in app.config.ts

Benefits:

Immediate content visibility
Better First Contentful Paint (FCP)
Improved Largest Contentful Paint (LCP)
Progressive enhancement

How Hydration Works:

Server pre-renders HTML with initial data
Client receives and displays HTML immediately
JavaScript loads and "hydrates" the page
Application becomes fully interactive

Fixed Code:


// main.ts
bootstrapApplication(AppComponent, {
  providers: [
    provideClientHydration()
  ]
});

// Component
@Component({
  template:
    <div class="cards-container">
    @for (card of cards; track card.id) {
        <div class="card">...</div>
      }
    </div>

})

Refresh the page and notice how content is visible immediately, even though the application is not yet interactive.

Status: Non-Interactive

Hydrating in 3s