Next.js에서 Server-Sent Events(SSE)와 WebSocket 비교 및 실시간 데이터 처리

 

• Server-Sent Events(SSE)와 WebSocket의 차이점
• SSE를 활용한 실시간 데이터 스트리밍
• Next.js에서 SSE를 구현하여 서버에서 클라이언트로 실시간 데이터 전송

 

pages/api/sse.js (SSE API 라우트)
export default function handler(req, res) {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  const sendEvent = (data) => {
    res.write(`data: ${JSON.stringify(data)}\n\n`);
  };

  sendEvent({ message: '연결 성공!' });

  const interval = setInterval(() => {
    sendEvent({ time: new Date().toLocaleTimeString() });
  }, 3000);

  req.on('close', () => {
    clearInterval(interval);
  });
}

components/SSEClient.js (SSE 클라이언트)
'use client';

import { useEffect, useState } from 'react';

export default function SSEClient() {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const eventSource = new EventSource('/api/sse');

    eventSource.onmessage = (event) => {
      setMessages((prev) => [...prev, JSON.parse(event.data)]);
    };

    return () => eventSource.close();
  }, []);

  return (
    <div>
      <h2>SSE 실시간 데이터</h2>
      <ul>
        {messages.map((msg, index) => (
          <li key={index}>{msg.time || msg.message}</li>
        ))}
      </ul>
    </div>
  );
}

app/page.js
import SSEClient from '../components/SSEClient';

export default function Home() {
  return (
    <div>
      <SSEClient />
    </div>
  );
}

• SSE는 서버에서 클라이언트로 단방향 데이터 스트리밍을 제공하는 간단한 방식
• WebSocket과의 차이점 및 각각의 활용 사례 비교