Syrup, WebFlux, SSE, Next.js로 모바일 웹 속도 UP!
by DD
2년 전
조회수 5
Syrup은 WebFlux, SSE, Next.js를 도입하여 모바일 웹 응답 속도를 개선함
WebFlux를 통해 비동기 API 호출 및 롱-폴링 타임아웃 문제를 해결함
API 요청 70% 감소, 응답 속도 50% 개선 및 렌더링 성능 향상 달성
WebFlux 아키텍처 심층 분석
WebFlux는 비동기, 논블로킹 방식으로 대규모 동시 요청 처리에 특화되었다. 구체적으로 Reactor를 활용하여 CompletableFuture의 복잡성을 개선하고, 롱-폴링 시 타임아웃 문제를 해결했다. 따라서 높은 확장성과 응답 속도 개선을 동시에 달성했다.
SSE와 Next.js를 활용한 프론트엔드 최적화
SSE를 통해 서버에서 클라이언트로의 단방향 데이터 전송을 구현하여, 개별 API 응답을 즉시 렌더링했다. Next.js의 SSG를 적용하여 초기 로딩 속도를 개선하고, API 요청 70% 감소라는 놀라운 결과를 얻었다. 따라서 사용자 경험을 향상시켰다.
WebFlux 도입 시 주의사항
WebFlux는 멀티 스레드 기반 라이브러리 및 블로킹 라이브러리 사용에 제약이 있다. ThreadLocal, MDC 대신 ContextView를 사용하고, RestTemplate 대신 WebClient를 사용해야 한다. 따라서 논블로킹 환경에 대한 이해가 필수적이다.
