서버 측에서 데이터를 점진적으로 불러오는 패턴 - React Streaming과 Suspense

server.js

const express = require('express');
const app = express();

app.get('/api/stream', async (req, res) => {
  res.setHeader('Content-Type', 'text/event-stream');
  res.setHeader('Cache-Control', 'no-cache');
  res.setHeader('Connection', 'keep-alive');

  for (let i = 1; i <= 5; i++) {
    await new Promise((resolve) => setTimeout(resolve, 1000));
    res.write(`data: ${JSON.stringify({ message: `데이터 ${i} 로드됨` })}\n\n`);
  }
  res.end();
});

app.listen(5000, () => console.log('서버 실행 중...'));

 

 

StreamingComponent.js

import React, { useEffect, useState } from 'react';

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

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

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

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

  return (
    <div>
      <h1>서버에서 점진적으로 데이터 로드</h1>
      {messages.map((msg, index) => (
        <p key={index}>{msg}</p>
      ))}
    </div>
  );
}

 

 

React Streaming과 Suspense를 활용하면 초기 로딩 속도를 개선할 수 있음