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

간단 소개

CSR 환경에서 Suspense 사용 시 발생하는 순차적 API 호출 문제를 해결하고 react-router-dom loader를 통해 성능을 개선한 경험을 공유합니다.

AI Summary

CSR 환경에서의 성능 문제와 해결
- CSR 환경에서 Suspense를 사용할 때 발생하는 순차적 API 호출 문제를 분석하고, 이로 인한 성능 저하를 지적합니다.
- react-router-dom의 loader와 @tanstack/react-query의 useQueries 훅을 사용하여 API 호출을 병렬화하는 방법을 제시합니다.
loader를 통한 성능 개선 및 고려 사항
- loader를 사용하여 API 호출을 병렬화함으로써 약 30%의 성능 개선을 달성한 사례를 소개합니다.
- useQueries 대신 loader를 선택한 이유로 기존 코드 구조 유지의 용이성과 Suspense 분리 가능성을 설명합니다.
- loader 사용 시 컴포넌트 내부 API 변경 시 loader에도 반영해야 함과 HTTP 1.1의 연결 제한에 대한 주의점을 강조합니다.