CSR 환경에서 Suspense로 발생한 문제 해결하고 성능 개선하기

이 글은 React 기반의 CSR(Client Side Rendering) 환경에서 Suspense를 사용하며 발생하는 순차적 API 호출 문제를 해결하고 성능을 개선한 경험을 공유합니다. react-router-dom v6와 @tanstack/react-query v4, React v18을 사용하여 코드 분할과 Suspense를 적용하는 방법을 설명하며, 특히 Suspense로 인한 동시성 문제와 순차적 API 호출 문제를 프리패칭(prefetching) 기법을 통해 해결하는 과정을 상세히 다룹니다.

이를 통해 약 30%의 성능 개선 효과를 얻었으며, CSR 환경에서 Suspense를 효과적으로 활용하는 방안과 주의점을 제시합니다.