프리패칭을 통한 API 호출 개선

React Router DOM 기반의 클라이언트 사이드 렌더링(CSR) 환경에서 Suspense를 활용하여 API 호출 시 발생하는 문제를 경험했습니다. 초기에는 순차적으로 API를 호출하다 보니 성능 저하가 있었고, 사용자 경험이 저하되었습니다. 이를 해결하기 위해 프리패칭 기법을 도입했습니다. 프리패칭을 통해 필요한 데이터들을 미리 요청하여, 페이지 렌더링 시 지연을 최소화했습니다. 이 과정에서 React의 Suspense를 사용하여 로딩 상태를 관리하며, 사용자에게 보다 매끄러운 경험을 제공할 수 있었습니다. 결과적으로, API 호출의 비효율성을 감소시키고, 페이지 로딩 속도가 향상되었습니다.