[Next.js] Code Splitting

Next.js는 Webpack을 사용하여 JS, CSS, 이미지 등 모든 모듈을 효율적으로 번들링합니다.
이렇게 번들된 코드는 브라우저가 빠르게 읽고 실행할 수 있습니다.

 

코드 분할(Code Splitting)을 통해 번들을 여러 조각(chunk)이나 컴포넌트 단위로 나누어,
초기 페이지 로딩 시 꼭 필요한 코드만 내려받고 나머지는 필요할 때 불러올 수 있습니다.

 

이를 위해 Next.js에서는 dynamic import를 활용하여 특정 컴포넌트를 사용자가 필요로 할 때만 동적으로 불러올 수 있으며, 덕분에 초기 로딩 속도가 빨라지고 사용자 경험이 개선됩니다.

const CodeSampleModal = dynamic(() => import('../components/CodeSampleModal'), {
  ssr: false,
});

 

💡 client에서만 동작하는 컴포넌트인 경우 ssr: false 옵션을 사용합니다.

적용 대상

• 무거운 라이브러리 기반 컴포넌트
  • ex. 차트, 지도, 에디터
  • recharts, chart.js, react-quill, react-map-gl 같은 라이브러리는 초기 번들 크기를 크게 늘립니다.
  • 사용자가 해당 화면에 들어왔을 때만 로딩하는 게 효율적입니다.
• 조건부로만 보여지는 UI
  • ex. 모달, 드롭다운, 사이드바
  • 사용자가 버튼을 눌러야 보이는 UI는 굳이 처음부터 불러올 필요가 없습니다.
• 페이지 전환 시점에만 필요한 컴포넌트
  • ex. 관리자용 대시보드 위젯, 특정 상세 페이지 전용 뷰
  • 다른 페이지에서는 전혀 필요 없으므로 분리하면 초기 진입 속도가 빨라집니다.
• SSR이 필요 없는 컴포넌트
  • 브라우저 환경에서만 동작하는 라이브러리 ( ex. window, document 의존 코드 )
  • ssr: false 옵션을 사용하면 서버 에러를 방지할 수 있습니다.
• 희소하게 사용되는 기능성 컴포넌트
  • ex. 파일 업로더, 이미지 크로퍼, 리치 텍스트 편집기
  • 전체 사용자 중 일부만 쓰는 기능이면 Dynamic Import가 적합합니다.

💡 무거운 third-party 라이브러리, 자주 쓰이지 않거나 초기 로딩에 꼭 필요하지 않은 컴포넌트에 적용