Subscriptions in NestJS - Performance & Optimization

Performance: Subscriptions

MEDIUM IMPACT

Subscriptions impact the real-time data flow and responsiveness of the application, affecting interaction speed and server-client communication efficiency.

Managing real-time data updates with subscriptions

NestJS

import { Resolver, Subscription, Args } from '@nestjs/graphql';
import { PubSub } from 'graphql-subscriptions';

const pubSub = new PubSub();

@Resolver()
export class MessageResolver {
  @Subscription(() => String, {
    filter: (payload, variables) => payload.channelId === variables.channelId,
  })
  messageAdded(@Args('channelId') channelId: string) {
    return pubSub.asyncIterator('messageAdded');
  }
}

Filtering subscription events on the server reduces unnecessary data sent to clients, lowering CPU and network usage.

📈 Performance GainReduces network traffic and CPU load, improving INP and server scalability.

Managing real-time data updates with subscriptions

NestJS

import { Resolver, Subscription } from '@nestjs/graphql';
import { PubSub } from 'graphql-subscriptions';

const pubSub = new PubSub();

@Resolver()
export class MessageResolver {
  @Subscription(() => String)
  messageAdded() {
    return pubSub.asyncIterator('messageAdded');
  }
}

Using a single global PubSub instance without filtering causes all clients to receive all events, increasing unnecessary data processing and network traffic.

📉 Performance CostTriggers excessive network traffic and CPU usage on server and clients, increasing INP and server load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Unfiltered global subscription	N/A	0	Minimal paint but high JS and network load	[X] Bad
Filtered subscription with args	N/A	0	Minimal paint and reduced JS/network load	[OK] Good

Rendering Pipeline

Subscriptions maintain an open connection for real-time updates, affecting the interaction responsiveness stage by pushing data asynchronously without blocking rendering.

→Interaction

→Network

→JavaScript Execution

⚠️ BottleneckNetwork and JavaScript Execution due to continuous event handling

Core Web Vital Affected

INP

Subscriptions impact the real-time data flow and responsiveness of the application, affecting interaction speed and server-client communication efficiency.

Optimization Tips

1Filter subscription events to send only relevant data to clients.

2Unsubscribe clients when they no longer need updates to save resources.

3Avoid heavy processing inside subscription resolvers to keep interaction responsive.

Performance Quiz - 3 Questions

What is a main performance risk of using unfiltered subscriptions in NestJS?

A Subscriptions increase initial page load time significantly

B Clients receive all events, causing unnecessary network and CPU load

C Subscriptions block the main thread during data fetch

D Subscriptions cause layout shifts on the page

DevTools: Network

How to check: Open DevTools, go to Network tab, filter by WebSocket or SSE connections, observe message frequency and size during subscription events.

What to look for: Look for excessive or unnecessary messages sent to clients indicating unfiltered subscriptions causing performance issues.