대형 이커머스 스토어프론트가 PLP를 CSR에서 SSR로 전환하여 검색 엔진 크롤링 불가능 상태 해결

Context

Product Listing Page(PLP)가 순수 클라이언트 사이드 렌더링 아키텍처로 구성되어 있어 초기 HTML이 비어있는 상태였다. view-source 확인 결과 0개의 상품 링크가 노출되었으며, 검색 엔진이 초기 HTML 패스에서 Product Detail Page(PDP) 링크를 발견하지 못했다.

Technical Solution

• 하이드레이션 블로킹 제거: ProductCard 컴포넌트에서 if (!isClient) return null 같은 동기 가드를 제거하고 서버에서 스켈레톤 구조와 크롤링 가능한 링크를 즉시 렌더링
• Klevu API SSR 호환성 구현: Strapi 카테고리 데이터를 Klevu 검색 엔진 요구사항에 맞도록 매핑하고, 대소문자 및 특수문자(& 등) 처리 로직 추가
• 검색 쿼리 타입 변경: 특정 용어 검색에서 CATNAV(Category Navigation) 와일드카드 쿼리로 전환하여 전체 카탈로그 발견성 보장
• 크롤링 가능한 페이지네이션: "Load More" 버튼을 <a> 태그로 대체하여 봇이 페이지 2 이상으로 이동 가능하게 구성
• 카테고리 트리 네비게이션 주입: SSR HTML에 10개 이상의 고가치 내부 링크를 포함한 상위 카테고리 네비게이션 컴포넌트 추가

Key Takeaway

SSR은 성능 최적화뿐 아니라 검색 엔진이 상품 그리드, 브레드크럼, 네비게이션을 초기 바이트에서 발견하기 위한 SEO 필수 요구사항이다. 검색 봇을 기준으로 curl 감시 및 JavaScript 미실행 환경에서의 검증이 필수적이다.