해외 숙소 리스트 성능 개선: SSR에서 인피니트 스크롤까지

1. 반쪽짜리 SSR을 완성형으로 개선

• 기존 SSR 구조는 서버에서 HTML만 내려주고 클라이언트 JS가 비로소 리스트를 채우는 방식이었습니다.
• 첫 페이지 데이터를 서버에서 Fetching하여 HTML을 채우고 클라이언트에서는 Hydration으로 React를 이어받도록 수정했습니다.
• 성과: LCP 21% 개선 (2.8초 → 2.2초), TBT 90% 감소 (90ms → 10ms).

2. 인피니트 스크롤과 뒤로가기 딜레마 해결 (Scroll Restoration)

• TanStack Query의 useInfiniteQuery 사용 시 뒤로가기 시 스크롤 초기화 문제 발생.
• 해결책: gcTime을 5분으로 설정하여 데이터 보존, refetchOnWindowFocus 및 refetchOnMount를 false로 설정하여 안정성 확보.
• sessionStorage를 사용하여 페이지 이탈 시 스크롤 위치 저장 및 복구.

3. 불안정한 해외 숙소 API 엣지 케이스 처리

• Case 1: 데이터 없음에도 hasNextPage가 true인 경우 Silent Retry 로직 구현 (Recursive Fetching).
• Case 2: 필터링 결과 수가 적어 IntersectionObserver 감지 실패 시, '더보기' 버튼 렌더링으로 UI 분기 처리.

4. 빠른 스크롤 시 UX 사각지대 해소

• Rapid Scrolling 시 새로운 리스트가 Footer 위쪽에 삽입되어 사용자가 인지하지 못하는 문제 발생.
• 결단: 모바일 인피니트 스크롤 뷰에서 Footer 제거하여 '탐색' 가치 집중.

5. 향후 계획 및 배움

• DOM 가상화(Virtualization) 도입 검토 및 TanStack Query의 캐싱 정책 고도화.
• 프론트엔드 개발은 사용자의 시간과 경험을 아껴주는 일임을 재확인.