Angular Performance Tips

The Problem

Without HTTP transfer cache, the application makes unnecessary API calls for data that could be cached during server-side rendering.

Issues:

Duplicate API calls
Unnecessary network requests
Slower client-side rendering
Wasted bandwidth

Problematic Code:


// app.config.ts
export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient()
  ]
};

// Component
@Component({...})
export class Component {
  ngOnInit() {
    // Same data requested on server and client
    this.api.getCards().subscribe(cards => {
      this.cards = cards;
    });
  }
}

Watch the network tab and console. Notice how the same data is fetched twice - once on the server and once on the client.

Data loaded