SK Planet Adopts WebFlux, SSE, and Next.js to Improve Syrup Mobile Web Speed

SK Planet undertook a new server build to solve response speed issues on the mobile web version of Syrup, a service that has been operating for over 13 years. The existing web gateway suffered performance degradation due to sequential calls to numerous external partner APIs and, during asynchronous processing, issues with the complexity and thread management of CompletableFuture.

Technology Stack Changes and Application

The new architecture applies WebFlux, Server Sent Events (SSE), and Next.js. WebFlux supports non-blocking I/O and reactive streams, making it suitable for handling large-scale concurrent requests, and the team used Mono.zip to simplify asynchronous API call code. SSE pushes data from the server to the client in real time, allowing the frontend to render individual API results immediately without waiting for the entire response. The frontend applied Next.js's Static Site Generation (SSG) feature to improve initial loading speed.

Trial and Error, and Constraints

Adapting to the reactive programming model took more than 6 months of learning. In the WebFlux environment, multi-thread-based libraries such as ThreadLocal and MDC could not be used, requiring a switch to ContextView instead. Additionally, since the use of blocking I/O libraries was restricted, the non-blocking client com.spotify.folsom was introduced for MemCached integration, and the team went through a process of resolving cache miss issues caused by hashing algorithm differences from the existing library.

Results of the Improvement

After adopting the new technology, the performance metrics of Syrup's mobile web improved significantly. The number of API requests decreased by more than 70% compared to before, and API response speed improved by more than 50%. Actual screen loading time was reduced from 3.52 seconds before the improvement to 1.96 seconds, achieving a speed improvement of 1.56 seconds.