Server-Sent Events alternative in Node.js - Performance & Optimization

Performance: Server-Sent Events alternative

MEDIUM IMPACT

This affects how quickly and efficiently real-time data updates reach the browser, impacting interaction responsiveness and page load.

Sending real-time updates from server to client

Node.js

import { Server } from 'socket.io';
import http from 'http';
const server = http.createServer();
const io = new Server(server, { cors: { origin: '*' } });
io.on('connection', (socket) => {
  const interval = setInterval(() => {
    socket.emit('time', new Date().toISOString());
  }, 1000);
  socket.on('disconnect', () => clearInterval(interval));
});
server.listen(3000);

WebSocket keeps a single persistent connection with full-duplex communication, reducing overhead and improving scalability.

📈 Performance GainLower server resource usage under many clients; faster interaction updates; better INP.

Sending real-time updates from server to client

Node.js

const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, {
    'Content-Type': 'text/event-stream',
    'Cache-Control': 'no-cache',
    'Connection': 'keep-alive'
  });
  setInterval(() => {
    res.write(`data: ${new Date().toISOString()}\n\n`);
  }, 1000);
}).listen(3000);

SSE keeps a single HTTP connection open per client, which can cause high memory and CPU usage on the server with many clients.

📉 Performance CostHigh server memory usage and CPU load with many clients; can degrade INP under load.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Server-Sent Events	Low per update	1 reflow per update	Moderate paint	[!] OK
WebSocket	Low per update	1 reflow per update	Moderate paint	[OK] Good

Rendering Pipeline

Real-time data arrives via network, triggers JavaScript event handlers that update the DOM, causing style recalculation, layout, and paint.

→Network

→JavaScript Execution

→Style Calculation

→Layout

→Paint

⚠️ BottleneckJavaScript Execution and Layout when many DOM updates happen rapidly

Core Web Vital Affected

INP

This affects how quickly and efficiently real-time data updates reach the browser, impacting interaction responsiveness and page load.

Optimization Tips

1Use WebSocket over SSE for better scalability with many clients.

2Avoid frequent DOM updates; batch changes to reduce layout thrashing.

3Monitor scripting and rendering times in DevTools to catch performance bottlenecks.

Performance Quiz - 3 Questions

Which real-time communication method generally uses fewer server resources for many clients?

A Server-Sent Events

B Polling every second

C WebSocket

D Long polling

DevTools: Performance

How to check: Record a session while receiving real-time updates; look for scripting and rendering times during updates.

What to look for: Lower scripting and rendering times indicate better performance; watch for long frames causing input lag.