마이리얼트립 SSR 최적화 및 React-query 중복 호출 문제 해결

이 게시물은 마이리얼트립의 통합 숙소 도메인에서 SSR(Server Side Rendering) 도입 후 발생한 중복 API 호출과 성능 저하 문제를 분석하고 해결한 과정을 다룹니다.

문제 원인 분석

• 구조적 중복 호출: fetchQuery와 prefetchQuery의 중복 사용으로 동일 API가 여러 번 호출됨
• 캐시 관리 미흡: SSR 환경에서 staleTime 미설정 및 resetQueries() 오용으로 캐시 활용 실패
• SSR과 CSR 간 queryKey 불일치로 인해 캐시 재활용이 되지 않음
• fetchQuery와 prefetchQuery의 특성에 맞지 않는 사용

개선 사례

• 숙소상세, 객실상세, 옵션리스트 페이지에서 API 호출 최소화 및 캐시 활용 강화
• 검색결과 페이지에서 SSR/CSR queryKey 통일 및 불필요한 맵 API SSR 호출 제거
• QueryClient 인스턴스 생성 시 staleTime 명시, 캐시 초기화 방법 개선

핵심 설계 포인트

• SSR과 CSR은 별도 context로 각각 최적화 필요
• 구조적으로 중복 호출이 없도록 데이터 흐름 재설계
• queryKey 일관성 유지와 적절한 메서드 사용
• 성능 측정 및 DevTools 활용 권장

이를 통해 API 호출 횟수를 절반 이상 줄이고 SSR 응답 속도와 주요 성능 지표를 크게 개선하였습니다.