KakaoPage Reveals Next.js BFF Architecture Adopting Urql to Overcome Apollo Client Cache Limitations

KakaoPage applied the BFF (Backend for Frontend) pattern to reduce frontend complexity and optimize API responses in an MSA environment. Initially, it used Next.js and Apollo Client, but Apollo Client's normalized caching policy (ID-based) caused cache data to be overwritten when objects with the same ID were queried under different filter conditions, resulting in incorrect data being returned. To resolve this, KakaoPage switched to Urql, which caches based on documents. Additionally, to reduce the complexity of asynchronous modifications to GraphQL data (such as click events and infinite scrolling), it adopted a dual structure where data is fetched with Urql and normalized data is stored in the Redux store.