핵심 요약
여기어때가 SSR 기반 페이지를 Hydration으로 진짜 SSR에 가깝게 구현하고 TanStack Query의 useInfiniteQuery와 sessionStorage를 활용한 무한 스크롤 UX를 개선해 해외 숙소 리스트의 로딩과 스크롤 경험을 크게 향상시켰습니다. LCP는 2.8초에서 2.2초로 약 21% 감소, TBT는 90ms에서 10ms로 대폭 감소했습니다.
구현 방법
- Hydration 기반 SSR로 첫 페이지 데이터를 서버에서 미리 내려 HTML을 채움
- useInfiniteQuery로 무한 스크롤 구현, gcTime 5분 유지 및 refetch 비활성화로 뒤로가기 안정성 확보
- sessionStorage로 스크롤 위치 저장/복구
주요 결과
- LCP 2.8→2.2초(약 21%), TBT 90→10ms 감소
- 뒤로가기 시 스크롤 위치 유지로 사용자 맥락 보존
- 모바일 인피니트 스크롤 뷰에서 Footer 제거로 탐색에 집중
