실시간 알림 구현 하기 : 2. SSE 백엔드 로컬 서버와 연결 테스트 (feat. next.js)

우리 서비스는 프론트(next.js - pages router)와 백엔드(spring boot)로 된 프로젝트이다. 기술을 도입하기 전 백엔드 개발자와 SSE 통신이 가능한 지 확인을 위해 프로토 타입 테스트를 시행하였다.

 

 

 

프론트 코드는 다음과 같이 작성하였다. EventSource 객체를 활용해 SSE 채널을 열고, 서버가 보내는 데이터를 수신하는 간단한 코드이다. 프로젝트에서는 백엔드와의 통신을 next.config.js의 rewrites 설정을 통해 프록시하고 있기 때문에, SSE 엔드포인트(/sse/test)도 동일한 방식으로 작성하였다.

// pages/sse-example.jsx

import { useEffect } from 'react';

export default function SseExamplePage() {
  useEffect(() => {
    const es = new EventSource('/sse/test');

    es.onopen = () => console.log('SSE 연결 성공');
    es.onmessage = (e) => console.log(e.data);
    es.onerror = () => console.log('SSE 연결 에러');

    return () => {
      console.log('SSE 연결 해제');
      es.close();
    };
  }, []);

  return <div>SSE 테스트 페이지</div>;
}

//next.config.js

async rewrites() {
    return [
      {
        source: '/sse/:path*',
        destination: `${process.env.CLOUD_BACKEND_URL}/sse/:path*`,
      },
    ]
 }

 

 

하지만, SSE 연결은 성공하지만 백엔드에서 전송하는 데이터에 대해서는 네트워크 창에서 송신받지 못하는 문제가 발생했다.

 

우리의 기대결과
SSE 연결이 된 후 메시지를 보내면 받는 즉시 스트리밍 되어야 한다.

 

포스트맨(기대결과 일치) : 

바로 백엔드 서버에 요청했을 때에는 연결이 되자마자 메시지가 오고, 이후 연결을 유지하는 메시지도 온다. 즉 SSE가 메시지를 보낼 때마다 응답이 도착한다.

 

브라우저(기대결과 불일치) : 

백엔드 서버 종료 후 데이터를 한꺼번에 응답받는다.

프론트엔드 서버와 연결하여 테스트할 때에는 연결 내내 eventstream에 데이터가 없다가 백엔드 서버 종료 후에 데이터가 나타난다.
콘솔창에도 데이터에 관련된 로그가 남지 않는다. 시간대를 보면 SSE가 메시지를 보낼 때 응답 받는 게 아니라 종료한 타이밍에 한꺼번에 받고 있다.

 

trouble shooting 🔥

backend URI endpoint로 직접 날리지 않고 rewrites를 설정할 경우 메시지를 받지 못하는 현상

 

 

1. 문제 개요

CORS 에러와 proxy를 위해 rewrites 설정을 통해 다음과 같이 적용하였다.

       {
         source: '/sse/:path*',
         destination: `${process.env.CLOUD_BACKEND_URL}/sse/:path*`,
       },

하지만 해당 적용으로 인해 채널은 열리지만 데이터를 송신 받는데는 실패하였다.

Postman - 한 글자씩 실시간으로 응답이 도착
브라우저 (rewrites 경유) - 모든 내용이 한꺼번에 도착

처음에는 브라우저나 클라이언트 문제인 줄 알았는데,

rewrites를 거치지 않고 백엔드 엔드포인트로 직접 요청하면 정상적으로 스트리밍이 되는 것을 확인할 수 있었다.

 

 

2. 오류 상세 분석

검색을 통해 해당 블로그에서 문제의 원인에 대해 알 수 있었다.

next.js 공식 페이지의 next.config.js의 설정 중 compress에 대한 글을 보면 압축과 관련된 설정에 대한 이야기가 작성되어 있다.

기본적으로 next.js를 설치시 이 옵션은 true로 default 된다. 해당 옵션의 기능은 next start시 사용자 지정 서버를 gzip으로 rendered content and static files를 대상으로 압축하여 사용하는 데, 이 압축이 활성화 되게 되면 충분한 데이터가 모일 때 까지 응답을 버퍼링하게 된다. 따라서, 일반적인 HTTP응답에서는 성능상 이점이 있지만, SSE 스트리밍에서는 실시간성을 헤치는 문제가 발생한다.

 

 

3. 문제 해결 방법

3.1 next.config.js의 compress 옵션을 끄는 방법

// next.config.js
module.exports = {
  compress: false, // 압축 비활성화
};

해당 방법을 사용 후 rewrites 설정으로 SSE통신을 하게 되면 데이터가 정상적으로 오는 것을 확인할 수 있었다.

🚨그렇지만, next.js 공식 문서에서는 해당 옵션을 끄지 않는 것을 권장하고 있다. 압축은 대역폭 사용량을 줄이고 애플리케이션 성능을 향상 시키기 때문

따라서 해당 엔드포인트를 위해 공식 문서에서도 권장하지 않는 방법을 사용하는 것은 지양하는 편이 좋다고 판단했다.

 

 

3.2 API Routes를 proxy 로 활용하여 백엔드와 통신

github issue에서 확인된 바로는 Next.js는 API Routes 응답을 기본적으로 gzip이 없다.

정적 파일, 페이지 응답 → Next.js가 기본 gzip (→ SSE 같이 chunk 단위 스트리밍이면 버퍼링 이슈 가능)
API Routes 응답 → 기본 gzip 없음 (→ 지금 쓰는 프록시 SSE에서는 gzip 버퍼링 이슈가 안 생김)

추가로, API Routes에서 요청(Request) 쪽 압축을 다루는 Discussion 도 있었다.

 “As it is, API routes seem to ignore content-encoding entirely…” GitHub

 

이건 “요청 바디가 gzip 이더라도 기본적으로 처리 안 해준다”는 얘기라, API Routes가 압축/디코딩 관련 기능을 기본 제공하지 않는다는 걸 간접적으로 또 한 번 보여주는 사례이다.

 

4. 결론

API Routes를 통해 프론트는 spring boot 서버에서 event-stream을 가져오는 방식을 채택하기로 했다.

 

예시 코드는 다음과 같다.

 

 

클라이언트: SSE 연결 코드 (Next.js Page)

 

• 브라우저는 백엔드가 아니라 Next.js API Routes(/api/sse)에 연결
• CORS, 인증, gzip 문제를 프론트에서 신경 쓰지 않아도 됨
• 실제 실무에서 가장 안정적인 구조

 

// pages/sse-example.tsx

import { useEffect } from 'react';

export default function SseExamplePage() {
  useEffect(() => {
    // ✅ Next.js API Routes를 향한 SSE 연결
    const es = new EventSource('/api/sse');

    es.onopen = () => {
      console.log('[SSE] 연결 성공');
    };

    es.onmessage = (event) => {
      console.log('[SSE] 수신 데이터:', event.data);
    };

    es.onerror = (error) => {
      console.error('[SSE] 연결 에러', error);
    };

    return () => {
      console.log('[SSE] 연결 해제');
      es.close();
    };
  }, []);

  return <div>SSE Proxy 테스트 페이지</div>;
}

 

Next.js API Routes: SSE Proxy 서버

• 브라우저에서 /api/sse 요청 수신
• 내부적으로 Spring Boot SSE 서버에 다시 연결
• 백엔드에서 오는 스트림 데이터를 그대로 브라우저로 중계
• gzip, CORS, 인증 헤더 문제 해결에 매우 유리

// pages/api/sse.ts
import type { NextApiRequest, NextApiResponse } from 'next';
import axios from 'axios';


export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  // 1) 브라우저로 보낼 SSE 헤더 세팅
  res.writeHead(200, {
    'Content-Type': 'text/event-stream; charset=utf-8',
    'Cache-Control': 'no-cache, no-transform',
    Connection: 'keep-alive',
  });

  // flush 가능한 환경이면 바로 헤더 플러시
  // (압축 미들웨어 끼어있을 때 도움됨)
  // @ts-ignore
  res.flushHeaders?.();

  // 2) 실제 백엔드 SSE 서버 주소
  const backendSseUrl = process.env.BACKEND_SSE_URL || 'http://localhost:8080/sse';

  let backendResponse;
  try {
    backendResponse = await axios.get(backendSseUrl, {
      responseType: 'stream', // 🔴 여기 중요: 스트림으로 받기
      headers: {
        Accept: 'text/event-stream',
        // 필요하면 인증 헤더도 여기서
        // Authorization: `Bearer ${token}`,
      },
    });
  } catch (error) {
    console.error('[SSE Proxy] 백엔드 연결 실패', error);
    res.write(`event: error\ndata: backend connection error\n\n`);
    res.end();
    return;
  }

  const backendStream = backendResponse.data; // ReadableStream

  // 3) 백엔드 → Next API → 브라우저로 그대로 중계
  backendStream.on('data', (chunk: Buffer) => {
    res.write(chunk);
  });

  backendStream.on('end', () => {
    console.log('[SSE Proxy] 백엔드 스트림 종료');
    res.end();
  });

  backendStream.on('error', (err: Error) => {
    console.error('[SSE Proxy] 백엔드 스트림 에러', err);
    res.end();
  });

  // 4) 브라우저가 연결을 끊었을 때 백엔드 스트림도 정리
  req.on('close', () => {
    console.log('[SSE Proxy] 클라이언트 연결 종료');
    backendStream.destroy();
  });
}