Repository pattern in NestJS - Performance & Optimization

Performance: Repository pattern

MEDIUM IMPACT

This pattern affects how data fetching and state management impact page load and interaction responsiveness.

Fetching data multiple times in different components

NestJS

class UserRepository {
  private userCache = null;
  constructor(private http: HttpClient) {}
  getUser() {
    if (this.userCache) return of(this.userCache);
    return this.http.get('/api/user').pipe(tap(data => this.userCache = data));
  }
}

@Component({})
class ProfileComponent {
  constructor(private userRepo: UserRepository) {}
  ngOnInit() {
    this.userRepo.getUser().subscribe();
  }
}

@Component({})
class DashboardComponent {
  constructor(private userRepo: UserRepository) {}
  ngOnInit() {
    this.userRepo.getUser().subscribe();
  }
}

Centralizes data fetching and caches results to avoid duplicate network calls, improving responsiveness.

📈 Performance GainSingle network request shared across components, reducing load and improving INP.

Fetching data multiple times in different components

NestJS

class UserService {
  constructor(private http: HttpClient) {}
  getUser() {
    return this.http.get('/api/user');
  }
}

@Component({})
class ProfileComponent {
  constructor(private userService: UserService) {}
  ngOnInit() {
    this.userService.getUser().subscribe();
  }
}

@Component({})
class DashboardComponent {
  constructor(private userService: UserService) {}
  ngOnInit() {
    this.userService.getUser().subscribe();
  }
}

Each component fetches user data separately causing duplicate HTTP requests and slower interaction.

📉 Performance CostTriggers multiple network requests, increasing load time and blocking UI responsiveness.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Multiple fetches in components	Low	Low	High due to blocking	[X] Bad
Repository with caching	Low	Low	Low, non-blocking	[OK] Good

Rendering Pipeline

The repository pattern reduces redundant data fetching, lowering network blocking and improving interaction responsiveness during rendering.

→Network

→JavaScript Execution

→Paint

⚠️ BottleneckNetwork requests causing blocking during interaction

Core Web Vital Affected

INP

This pattern affects how data fetching and state management impact page load and interaction responsiveness.

Optimization Tips

1Cache data in the repository to avoid duplicate network calls.

2Centralize data access to improve interaction responsiveness.

3Avoid fetching the same data multiple times in different components.

Performance Quiz - 3 Questions

How does using a repository pattern with caching affect network requests?

A It has no effect on network requests.

B It increases network requests by adding extra layers.

C It reduces duplicate network requests by sharing cached data.

D It delays network requests until user interaction.

DevTools: Network

How to check: Open DevTools, go to Network tab, reload page, and observe number of API calls for the same data.

What to look for: Multiple identical requests indicate poor repository usage; a single request reused is optimal.