# [[E-commerce Migration to Next.js Case Study]]

## 📌 Brief Summary
이 주제는 10,000개의 제품을 보유한 패션 이커머스 사이트가 기존의 CSR(Client-Side Rendering) 기반 Create React App 환경에서 Next.js 기반으로 마이그레이션한 실제 사례를 다룹니다. 이 마이그레이션은 검색 엔진 색인률, 로딩 성능(LCP), 유기적 트래픽을 극적으로 개선하기 위해 수행되었습니다. 결과적으로 렌더링 전략의 전환과 웹 성능 최적화를 통해 사이트의 매출이 대폭 향상되는 직접적인 비즈니스 성과를 창출했습니다.

## 📖 Core Content
* **마이그레이션 이전 상태 및 문제점 (CSR 환경):** 기존 이커머스 사이트는 Create React App을 사용한 클라이언트 사이드 렌더링(CSR) 방식으로 구축되어 있었습니다 [1]. 전체 10,000개의 제품 중 40%인 4,000개만 검색 엔진에 색인되었으며, 평균 TTFB(Time to First Byte)는 200ms, 평균 LCP(Largest Contentful Paint)는 4.2초로 성능이 매우 저조(Poor)했습니다 [1]. 당시 유기적 검색 트래픽은 월 50,000명, 유기적 검색을 통한 매출은 월 20만 달러에 머물렀습니다 [1].
* **최적화 및 마이그레이션 실행 (Next.js 도입):** 두 명의 엔지니어가 6주에 걸쳐 Next.js로의 마이그레이션을 완료했습니다 [2]. 주요 변경 사항으로는 카테고리 페이지(`/category/*`)에 빌드 타임 정적 생성(SSG)을 도입하고, 제품 페이지에는 1시간 단위 업데이트(`revalidate: 3600`)를 적용한 점진적 정적 재생성(ISR) 방식을 채택한 것이 포함됩니다 [3]. 또한 풍부한 검색 결과(Rich results)를 위해 제품 스키마(Product schema) 구조화 데이터를 추가하고, WebP 포맷과 Next.js Image 컴포넌트를 활용해 이미지를 최적화했습니다 [3]. 더불어 코드 스플리팅을 통해 메인 자바스크립트 번들의 크기를 1.8MB에서 320KB로 크게 축소했습니다 [3].
* **마이그레이션 이후 성과 및 비즈니스 영향:** Next.js ISR을 적용한 후, 제품 색인률은 기존 40%에서 95%(9,500/10,000)로 급증했습니다 [3]. ISR 캐시 적중 덕분에 평균 TTFB는 50ms로 단축되었고, 평균 LCP는 1.8초로 떨어져 Core Web Vitals에서 'Good' 등급을 달성했습니다 [3]. 비즈니스 측면에서는 유기적 트래픽이 월 85,000명으로 70% 증가했으며, 매출은 월 35만 달러로 75% 상승하여 결과적으로 월 15만 달러, 연간 180만 달러의 추가 수익(ROI)을 창출했습니다 [2, 3].

## 🔗 Knowledge Connections
- **Related Topics:** [[Incremental Static Regeneration (ISR)]], [[Client-Side Rendering (CSR)]], [[Largest Contentful Paint (LCP)]], [[Core Web Vitals]], [[Code Splitting]], [[Image Optimization]]
- **Projects/Contexts:** [[React SEO Guide]], [[E-commerce Web Development]], [[Web Performance Optimization]]
- **Contradictions/Notes:** 기존 CSR 기반의 React 앱은 초기 HTML이 비어 있어 검색 엔진 색인 지연 및 성능(LCP) 문제를 초래했으나, Next.js의 SSR/SSG/ISR 기능을 통해 웹 성능과 SEO 트래픽을 동시에 획기적으로 개선할 수 있음을 완벽하게 증명한 사례입니다 [1, 3]. 

---
*Last updated: 2026-04-26*