SK Planet's Chat DIC Frontend Performance Improvements: Applying SSE Streaming and Virtualization Techniques

SK Planet's Data Infrastructure team unveiled a case study on frontend performance improvements for Chat DIC, its SQL Assistant and Table meta search system. Built on React and Vite, this service optimized user experience by introducing SSE (Server-Sent Events), Buffer, and Virtualization technologies tailored to the characteristics of real-time conversational LLMs.

Adopting SSE and Streaming Processing Since LLM responses involve one-way communication from server to client, the team adopted SSE instead of WebSocket, which is a more complex bidirectional communication method. SSE has lower implementation difficulty because browsers handle automatic reconnection and it offers high compatibility with HTTP/2. Since axios does not return a ReadableStream, making it unsuitable for streaming, the team used the JavaScript native ReadableStream API to parse data in text/event-stream format.

Resolving Rendering Delays with Buffer Implementation The team addressed the problem of delayed server response rendering caused by browser resource throttling when a tab is inactive. They implemented an approach where streaming data received while a tab is inactive is temporarily stored in bufferRef, and when the tab becomes active again (via the visibilitychange event), the content is output all at once. This provides a seamless, uninterrupted conversation experience even when returning to the tab.

Optimizing DOM Nodes with Virtualization To prevent rendering slowdowns caused by an increasing number of DOM nodes as conversations grow longer, the team applied a Windowing technique using the react-window library. Only the UI elements visible on screen are actually rendered, while the rest are removed; row heights are dynamically adjusted based on message length using the useDynamicRowHeight Hook and a defaultRowHeight: 50 setting. As a result, the number of DOM nodes is kept at a consistent level, significantly reducing resource usage and improving scroll performance.