Syrup 모바일 웹 속도 개선기: WebFlux, SSE, 그리고 Next.js

문제 상황

• 오래된 Syrup 모바일 웹의 API 서버 레거시화로 웹 게이트웨이 응답 속도 저하
• 외부 파트너 API 다수 호출 시 순차 처리와 일부 비동기 호출 모두 대기 시간과 타임아웃 부담 발생
• 프론트엔드에서 개별 API 병렬 호출 시 중복 호출과 네트워크 비용 증가

원인 분석

• 스프링 MVC 기반 CompletableFuture 사용 시 코드 복잡도와 스레드 풀 관리 부담
• 블로킹 라이브러리와 스레드 기반 컨텍스트 사용이 WebFlux 환경과 충돌
• SSR 적용 시 추가 서버 리소스와 운영 비용 부담

해결 방법

• 웹 게이트웨이에 WebFlux와 SSE 적용으로 비동기 처리와 개별 응답 즉시 푸시 구성
• 프론트엔드에 Next.js를 도입하되 SSG 중심으로 선택해 초기 로딩과 렌더링 속도 개선
• Mono.zip, WebClient, ContextView, 비동기·논블로킹 라이브러리 활용

적용해볼 점

• 외부 API 연동이 많은 서비스에서 논블로킹 리액티브 구조 검토
• 실시간 응답 전달이 필요한 화면에 SSE 활용 검토
• 렌더링 최적화가 필요할 때 Next.js의 SSG 우선 적용 검토