Building an Ad Dashboard That Keeps All Data in the Browser

The Toss ad dashboard is a tool that allows advertisers to navigate campaigns, ad sets, and creatives while repeatedly applying various filters and sorting options. In the previous architecture, every operation required waiting for a server call, causing cumulative latency during navigation that hindered user attempts.

Beyond these speed issues, the server-based structure revealed structural limitations such as missing items with zero performance, inability to locate specific IDs, sorting restrictions not supported by the server, and URL state validation failures. To address these issues, the team switched to an architecture that fetches all data to the browser upon entry and handles subsequent filtering, sorting, searching, and pagination on the client side.

The core premise of this decision was the existence of an upper limit on data volume. After confirming that the current maximum of 20,000 items provided sufficient headroom to reach the design goal of 100,000 items, the team was able to calculate the limits of memory and computation time.

The API was split into Metadata (structural information), Performance (performance metrics), and additional columns based on the nature of the response. This allowed the table to render progressively as soon as Metadata arrived, ensuring that items with zero performance remained as Metadata-based rows. Additionally, adding columns became possible without structural changes, requiring only ID merging, which maintained the stability of the rest of the interface even if a specific API failed.