BACK TO HOME
DEVELOPMENT12 minDRAFT

Building a Real-Time Market Dashboard with Next.js

Streaming tick data over WebSockets into a Next.js app with custom charting, server components for historical context, and sub-second UI updates.

Building a Real-Time Market Dashboard with Next.js

Most trading dashboards are either Electron apps that eat 4GB of RAM or web apps that lag behind by 30 seconds. I wanted something in between — fast, lightweight, and running in a browser tab.

The Stack

  • Next.js 14 with App Router for the shell and historical data
  • WebSockets for real-time tick data
  • Custom canvas rendering for charts (no D3, no Chart.js)
  • Virtualized tables for order book and trade history

Why Not a Charting Library?

I tried TradingView's lightweight charts, Recharts, and Nivo. They're all fine for dashboards that update every few seconds. But when you're streaming 100+ ticks per second across multiple instruments, the DOM becomes the bottleneck.

Canvas rendering with a custom draw loop solved this:

function drawCandlestick(ctx: CanvasRenderingContext2D, candle: OHLCV, x: number, width: number) {
  const color = candle.close >= candle.open ? '#22c55e' : '#ef4444';
  ctx.fillStyle = color;

  // Body
  const bodyTop = Math.min(candle.open, candle.close);
  const bodyHeight = Math.abs(candle.close - candle.open);
  ctx.fillRect(x, priceToY(bodyTop), width, Math.max(bodyHeight * scale, 1));

  // Wick
  ctx.fillRect(x + width / 2 - 0.5, priceToY(candle.high), 1, priceToY(candle.low) - priceToY(candle.high));
}

Server Components for Historical Data

The key insight: use React Server Components for anything that doesn't need real-time updates. Historical candles, daily stats, portfolio summary — all rendered on the server, zero client-side JS.

The WebSocket layer only handles the live feed, keeping the client bundle small and the updates fast.

ALL POSTS