해외 숙소 리스트 성능 개선기 : 반쪽짜리 SSR에서 완벽한 인피니트 스크롤까지

이 글은 여기어때 서비스웹개발팀에서 해외 숙소 리스트 페이지의 성능을 개선한 경험을 공유합니다. 기존에 SSR을 표방했지만 실제로는 클라이언트에서 JS 실행 후 콘텐츠가 채워지는 반쪽짜리 SSR 구조를 가지고 있었습니다.

이를 해결하기 위해 첫 페이지 데이터는 서버에서 미리 Fetching 하여 HTML을 채우고 클라이언트에서 Hydration을 통해 React가 자연스럽게 이어받도록 수정했습니다. 또한, 인피니트 스크롤 도입 시 발생했던 푸터 도망감, 스크롤 초기화, 구글 봇의 빈 화면 인식 등의 문제를 해결했습니다.

이러한 개선을 통해 LCP(Largest Contentful Paint) 지표를 21% 개선하는 성과를 얻었으며, 사용자 경험 향상과 검색 엔진 최적화(SEO) 측면에서도 긍정적인 영향을 미쳤습니다.