카카오페이지, Apollo Client 캐시 한계로 Urql 채택한 Next.js BFF 구조 공개

카카오페이지는 MSA 환경에서 프론트엔드 복잡성을 줄이고 API 응답을 최적화하기 위해 BFF(Backend for Frontend) 패턴을 적용했습니다. 초기에는 Next.js와 Apollo Client를 사용했으나, Apollo Client의 정규화 캐싱 정책(ID 기반)으로 인해 동일한 ID를 가진 객체가 다른 필터 조건으로 조회될 때 캐시 데이터가 덮어씌워져 잘못된 결과가 반환되는 문제가 발생했습니다. 이를 해결하기 위해 카카오페이지는 document 기반으로 캐싱하는 Urql로 교체했습니다. 또한, GraphQL 데이터의 비동기 수정(클릭 이벤트, 무한 스크롤 등)의 복잡성을 낮추기 위해 Urql로 데이터를 페치하고 Redux 스토어에 정규화된 데이터를 저장하는 이원화 구조를 취했습니다.