해외 숙소 리스트 성능 개선기 : 반쪽짜리 SSR에서 완벽한 인피니트 스크롤까지
프론트엔드
해외 숙소 리스트 성능 개선기 : 반쪽짜리 SSR에서 완벽한 인피니트 스크롤까지
두줄요약
해외 숙소 리스트의 반쪽짜리 SSR을 Hydration 기반으로 개선하고 무한 스크롤 UX를 다듬었습니다. 캐싱과 스크롤 복구, 예외 처리로 LCP와 TBT도 함께 개선했습니다.
문제 상황
- 해외 숙소 리스트의 초기 렌더링이 비어 있는 반쪽짜리 SSR 구조
- 무한 스크롤 도입 후 뒤로가기 시 스크롤 초기화와 빈 화면 노출 문제
- 외부 숙소 API의 불안정한 응답, 짧은 리스트에서의 감지 실패, 모바일에서의 Footer 노출 문제
해결 방법
- 첫 페이지 데이터를 서버에서 미리 채워 내려주는 Hydration 기반 SSR로 전환
- TanStack Query 캐싱과 sessionStorage를 결합해 뒤로가기 시 데이터와 스크롤 위치 복구
- 빈 응답 재귀 재호출, 리스트 짧을 때 더보기 버튼 분기, 모바일에서는 Footer 제거로 UX 보완
성능/운영 포인트
- LCP 2.8초에서 2.2초로 약 21% 개선
- TBT 90ms에서 10ms로 감소
- gcTime 5분, refetchOnWindowFocus 및 refetchOnMount 비활성화로 맥락 보존