핵심 요약
SSG.COM의 신세계백화점 PC 메인 페이지를 Spring 기반에서 React/Next.js로 전환하고 SSR/CSR 하이브리드 렌더링으로 초기 로딩과 유닛 로딩 흐름을 개선했습니다.
구현 방법
- Next.js 기반 셋업으로 9개 유닛 구성, 3개 단위 API 호출
- React Query(useQuery, useInfiniteQuery)로 로딩 흐름 및 무한 스크롤 구현
- SSR 프리패치로 메인 롤링배너를 즉시 렌더링하고 HeadMeta/HomeHeadMeta로 SEO 강화
- BreadCrumb 및 Organization 로고 스키마, Canonical 포함
주요 결과
- 9개 유닛 구성 및 3단위 호출로 데이터 흐름 개선
- 메인 롤링배너 SSR 프리패치로 로딩 지연 제거
- SEO/구조화 데이터 도입으로 검색 엔진 친화성 강화
