How would you handle real-time data (WebSockets / SSE) in a Next.js CSR component?

Question

Accepted Answer

Real-time data in Next.js CSR components requires establishing a persistent connection to a server that can push updates. The two primary technologies are WebSockets (full-duplex, bidirectional communication) and Server-Sent Events (SSE, unidirectional server-to-client streaming). Both require careful lifecycle management in React components to prevent memory leaks and ensure connections are properly cleaned up when components unmount. WebSockets: Full-duplex communication where both client and server can send messages independently. Ideal for chat applications, collaborative editing, gaming, and any scenario requiring real-time bidirectional interaction [citation:4][citation:9]. Server-Sent Events (SSE): Unidirectional server-to-client streaming over HTTP. Simpler to implement than WebSockets, automatically reconnects, and works well for live dashboards, notifications, and progress updates where only the server needs to push data [citation:6]. Polling fallback: For simpler needs, client-side polling with setInterval and SWR/React Query can simulate real-time updates without persistent connections [citation:3]. ```tsx 'use client'; import { useEffect, useRef, useState } from 'react'; interface Message { id: string; text: string; timestamp: number; } export default function RealTimeChat() { const [messages, setMessages] = useState([]); const [input, setInput] = useState(''); const [connectionStatus, setConnectionStatus] = useState<'connecting' | 'open' | 'closed'>('connecting'); const socketRef = useRef(null); useEffect(() => { // Create WebSocket connection const socketUrl = process.env.NEXT_PUBLIC_WEBSOCKET_URL || 'ws://localhost:3001'; socketRef.current = new WebSocket(socketUrl); // Set up event handlers socketRef.current.onopen = () => { console.log('WebSocket connected'); setConnectionStatus('open'); }; socketRef.current.onmessage = (event) => { try { const newMessage = JSON.parse(event.data) as Message; setMessages((prev) => [...prev, newMessage]); } catch (error) { console.error('Failed to parse message:', error); } }; socketRef.current.onclose = () => { console.log('WebSocket disconnected'); setConnectionStatus('closed'); }; socketRef.current.onerror = (error) => { console.error('WebSocket error:', error); setConnectionStatus('closed'); }; // Cleanup on unmount return () => { if (socketRef.current?.readyState === WebSocket.OPEN) { socketRef.current.close(); } }; }, []); const sendMessage = () => { if (!input.trim()) return; if (socketRef.current?.readyState === WebSocket.OPEN) { const message: Message = { id: Date.now().toString(), text: input, timestamp: Date.now() }; socketRef.current.send(JSON.stringify(message)); setInput(''); } else { console.error('Cannot send message: WebSocket not open'); } }; return (

Status: {connectionStatus}

{messages.map((msg) => (

{new Date(msg.timestamp).toLocaleTimeString()}: {msg.text}

))}

setInput(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && sendMessage()} className="flex-1 border rounded px-2 py-1" placeholder="Type a message..." disabled={connectionStatus !== 'open'} />

); } ``` This pattern uses `useRef` to maintain the WebSocket instance across renders and properly cleans up in the `useEffect` cleanup function, preventing memory leaks [citation:1][citation:9]. ```tsx 'use client'; import { useEffect, useState } from 'react'; interface Notification { id: string; message: string; type: 'info' | 'success' | 'warning'; timestamp: number; } export default function LiveNotifications() { const [notifications, setNotifications] = useState([]); const [connected, setConnected] = useState(false); useEffect(() => { // Create EventSource connection to SSE endpoint const eventSource = new EventSource('/api/sse'); // Connection opened

How would you handle real-time data (WebSockets / SSE) in a Next.js CSR component?

Handle real-time data in Next.js CSR components by establishing a WebSocket or SSE connection in a useEffect hook, managing connection lifecycle with cleanup, and optionally integrating with state management libraries like SWR or React Query for advanced caching and auto-reconnection

How would you handle real-time data (WebSockets / SSE) in a Next.js CSR component?

Handle real-time data in Next.js CSR components by establishing a WebSocket or SSE connection in a useEffect hook, managing connection lifecycle with cleanup, and optionally integrating with state management libraries like SWR or React Query for advanced caching and auto-reconnection

Scenario Questions

Follow-up Questions