RSC와 TanStack Query 통합, Data Ready로 해결!

React Server Component(RSC)와 TanStack Query 사용 시 prefetch 쿼리 관리의 어려움 발생

Data Ready 프레임워크는 컴포넌트와 쿼리를 가깝게 유지하며 병렬 prefetch 지원

무한 스크롤 문제 해결을 위해 useInfiniteQuery를 활용, 클라이언트 상태 관리 간소화

RSC와 TanStack Query 통합의 난제

React Server Component(RSC)는 서버 자원 효율성을 높이지만, TanStack Query와 함께 사용 시 prefetch 쿼리 관리가 복잡해진다. 구체적으로, 쿼리 depth가 깊어질수록 prefetch 쿼리 추적이 어려워지고, 직렬 렌더링 지연 문제가 발생한다. 따라서 Data Ready는 이러한 문제 해결을 목표로 한다.

Data Ready 프레임워크의 핵심 설계

Data Ready는 컴포넌트와 쿼리를 가까이 배치하여 prefetch 관리를 용이하게 한다. Isograph의 아이디어를 차용하여, 타입 안전성을 확보하고, requiredResources를 상위 컴포넌트로 전파하여 병렬 prefetch를 지원한다. 반면, 무한 스크롤은 클라이언트 로직을 활용하여 복잡성을 줄였다.

Data Ready를 활용한 무한 스크롤 구현

Data Ready는 useInfiniteQuery를 통해 무한 스크롤을 구현하여 클라이언트 상태 관리를 간소화한다. querySet 정보를 함께 전달하여, 기존 React Query의 친숙한 인터페이스를 유지한다. 따라서 개발자는 무한 스크롤 로직에 집중할 수 있으며, 프레임워크의 편의성을 누릴 수 있다.