올리브영 라이브관, Next.js로 성능 잡고 개발 효율도 UP!
by DD
3년 전
조회수 8
Next.js 12 기반의 신규 아키텍처로 프리미엄관 성능을 개선함
SSR 방식을 선택하여 검색 엔진 최적화 및 사용자 경험을 향상시킴
Lazy loading과 Custom hook 활용으로 개발 효율성을 높임
SSR vs CSR: 올리브영의 선택
올리브영은 SSR을 통해 사용자에게 즉각적인 페이지 로딩 경험을 제공한다. 검색 엔진 최적화(SEO)를 위해 SSR을 선택하여 검색 봇이 콘텐츠를 쉽게 크롤링하도록 했다. 따라서 Next.js를 활용하여 SSR 환경을 구축하고, 사용자 경험과 SEO를 동시에 개선했다.
Next.js Image 최적화 전략
라이브관은 이미지와 영상 콘텐츠가 많아 Next/Image 컴포넌트를 적극 활용했다. Lazy loading을 통해 초기 로딩 속도를 개선하고, 불필요한 이미지 로드를 방지했다. 결과적으로 페이지 로딩 속도 향상과 사용자 경험 개선을 동시에 달성했다.
Custom Hook으로 개발 효율 증대
라이브관 개발에서 Custom Hook을 활용하여 비즈니스 로직과 UI 렌더링 부분을 분리했다. useMemo와 useCallback을 적절히 사용하여 불필요한 렌더링을 줄였다. 따라서 코드 재사용성을 높이고, 개발 생산성을 향상시키는 결과를 얻었다.
