Interceptor interface in NestJS - Performance & Optimization

Performance: Interceptor interface

MEDIUM IMPACT

Interceptors affect the response time and rendering speed by controlling request handling and response transformation in NestJS applications.

Modifying response data with an interceptor

NestJS

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class EfficientInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    // Minimal synchronous work
    return next.handle().pipe(
      map(data => {
        // Lightweight transformation
        return { ...data, intercepted: true };
      })
    );
  }
}

Avoids blocking synchronous loops and uses lightweight transformations to keep event loop free.

📈 Performance GainNon-blocking, reduces response delay, improves INP

Modifying response data with an interceptor

NestJS

import { Injectable, NestInterceptor, ExecutionContext, CallHandler } from '@nestjs/common';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';

@Injectable()
export class SlowInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    // Heavy synchronous processing before passing
    for (let i = 0; i < 1e7; i++) {}
    return next.handle().pipe(
      map(data => {
        // Heavy synchronous processing on response
        for (let i = 0; i < 1e7; i++) {}
        return data;
      })
    );
  }
}

Heavy synchronous processing blocks the event loop causing delayed response and poor input responsiveness.

📉 Performance CostBlocks event loop for 100+ ms, increasing INP and slowing response

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Heavy synchronous processing in interceptor	N/A	N/A	Blocks event loop delaying response	[X] Bad
Lightweight asynchronous interceptor logic	N/A	N/A	Non-blocking, fast response	[OK] Good

Rendering Pipeline

Interceptors run during the request-response cycle before the final response is sent. They can modify or delay the response, affecting how fast the client receives data.

→Request Handling

→Response Transformation

→Event Loop

⚠️ BottleneckBlocking synchronous code inside interceptors delays event loop and response emission.

Core Web Vital Affected

INP

Interceptors affect the response time and rendering speed by controlling request handling and response transformation in NestJS applications.

Optimization Tips

1Avoid heavy synchronous code inside interceptors to keep the event loop free.

2Use asynchronous and minimal logic in interceptors to speed up response time.

3Monitor interceptor execution time to prevent input responsiveness delays.

Performance Quiz - 3 Questions

What is the main performance risk of heavy synchronous code inside a NestJS interceptor?

A It increases CSS paint time

B It blocks the event loop causing delayed responses

C It causes layout shifts on the client

D It increases bundle size significantly

DevTools: Performance

How to check: Record a performance profile while making a request to the NestJS server. Look for long tasks or blocking scripts during the interceptor execution time.

What to look for: Long blocking tasks or delays in the main thread indicate slow interceptor processing.