Next.js 웹사이트 성능 최적화: 어드민 서비스 전략 및 공통 라이브러리 구축 가이드

핵심 기술

본 분석은 Next.js 기반 웹사이트의 성능 병목 현상을 진단하고, 어드민 서비스 특화 최적화 전략 및 효율적인 사내 공통 라이브러리 구축 방안을 제시합니다.

기술적 세부사항

• 성능 병목 진단:

  • 초기 로딩 시 과도한 자바스크립트 (14MB 이상) 로딩 및 불필요한 서드파티 스크립트 사용.
  • _app.js 파일의 최적화 및 코드 분할 필요성 제기.
  • 과도한 다국어 데이터 전송, 최적화되지 않은 이미지/폰트 로딩으로 인한 CLS 발생.
  • __buildManifest.js 파일을 통한 Next.js 번들 분석.

• 어드민 서비스 성능 최적화 전략:

  • 주요 기능 성능 우선: 로그인 후 주요 기능 사용 시 인터랙션 및 성능(INP, TTI)에 집중.
  • 공격적인 코드 분할 및 지연 로딩: 무거운 라이브러리 분리 및 필요한 기능만 로드.
  • 데이터 처리 및 렌더링 최적화: 필요한 데이터만 가져오고 DOM 요소 수 최소화, 디바운스/스로틀 적극 활용.
  • 캐싱 활용: 애플리케이션 데이터, 정적 에셋, API 응답 캐싱을 통한 네트워크 요청 감소.

• 사내 공통 라이브러리 구축 방안:

  • 마이크로 서비스 분리: 서비스 안정성, 공통 라이브러리 활용, 코드 품질, 배포/유지보수 용이성 증대를 위한 서비스별 분리 고려.
  • 모노레포 구조 및 패키지 빌드/배포: 효과적인 공통 라이브러리 개발을 위한 선행 작업.
  • 브라우저 지원 범위 통일: 불필요한 폴리필/트랜스파일 최소화를 위한 browserslist 관리.

• 우선 적용 개선 항목:

  • lodash와 같이 트리쉐이킹 되지 않는 라이브러리 제거 또는 대체.
  • __app.tsx의 불필요한 코드 이관.
  • 서드파티 라이브러리에 async/defer 속성 적용.
  • CLS 유발 요소를 리액트에서 CSS 미디어 쿼리로 변경.

• 분석 도구 및 기술 스택 확인:

  • Chrome DevTools, WebPageTest 활용.
  • Next.js (Page Router 추정), React 17.0.2, Emotion, Apollo Client, React Query, Axios, i18next, Day.js, uuid, Lodash, Datadog SDK, Zustand 사용.
  • AWS CloudFront 사용 (IP 주소 0.0.0.0으로 표기).

개발 임팩트

제시된 최적화 방안 적용을 통해 웹사이트의 로딩 속도 및 사용자 경험을 크게 향상시키고, 특히 어드민 서비스의 업무 효율성을 증대시킬 수 있습니다. 또한, 잘 설계된 사내 공통 라이브러리는 장기적인 개발 생산성 및 코드 품질 향상에 기여할 수 있습니다.

커뮤니티 반응

콘텐츠 제공자는 다른 개발자에게 해당 분석 및 제안 내용을 추천할 의향이 있다고 밝히며, 막연했던 성능 최적화에 대한 구체적인 방안을 제공한다는 점에서 높은 만족도를 표했습니다.