CSR 환경에서 Suspense로 인한 문제 해결 및 성능 개선하기

CSR 환경에서 Suspense를 통해 선언적으로 로딩을 처리할 때, 하나의 컴포넌트에서 여러 개의 데이터를 호출하면 API가 순차적으로 실행되는 Waterfall 현상이 발생한다. 이는 첫 번째 쿼리가 완료될 때까지 다음 쿼리가 실행되지 못해 전체 렌더링 속도를 저하시키는 원인이 된다.

이 문제를 해결하는 첫 번째 방법은 @tanstack/react-query의 useQueries(v5 기준 useSuspenseQueries) 훅을 사용하는 것이다. 이를 통해 여러 API 요청을 병렬로 처리함으로써 데이터 로딩 시점을 앞당길 수 있다.

두 번째 방법으로는 react-router-dom의 **loader**를 활용하는 방식이 있다. 이러한 최적화를 통해 순차적 API 호출을 제거함으로써 약 **30%**의 성능 개선 효과를 얻을 수 있다.