[Next.js] dynamic import로 react-quill 에러 해결(ReferenceError: document is not defined)

react-quill에서 에러 발생

react-quill을 아래처럼 static import를 하니 에러가 발생했다.

import ReactQuill from 'react-quill'
import EditorToolbar from '../toolbar/EditorToolbar'

 

⨯ node_modules/quill/dist/quill.js (7661:11) @ document
⨯ ReferenceError: document is not defined

 

에러가 발생한 이유는 react-quill가 로드되는 시점에 document가 정의되지 않았기 때문이다.

dynamic import를 통해 모듈을 동적으로 import 했다. dynamic import를 사용하면 react-quill을 서버 측 모듈에 포함하지 않고 런타임에 (필요한 시점에) import 할 수 있다.

import dynamic from 'next/dynamic'

const ReactQuill = dynamic(() => import('react-quill'), { ssr: false })
const EditorToolbar = dynamic(() => import('../toolbar/EditorToolbar'), {
  ssr: false,
})

dynamic import를 사용하면 에러가 해결된다. 👍 dynamic import에 대해서 더 알아보자!

 

dynamic import란?

next.js에서 dynamic import 문법을 지원한다. dynamic import를 사용하면 모듈을 빌드 타임이 아닌 런타임에 불러온다. 이를 통해 번들 파일을 분리하고 필요한 모듈을 필요한 시점에 로드하여 초기 로딩 성능을 향상시키는데 도움이 된다. 예를 들어, 사용자가 클릭하여 열 때까지 모달 로드를 연기할 수 있다.

 

next/dynamic을 사용하면 DynamicHeader는 페이지의 초기 자바스크립트 번들에 포함되지 않는다. 페이지는 먼저 Suspense fallback이 렌더링 되고, 그다음에 DynamicHeader가 렌더링 된다.

import dynamic from 'next/dynamic'
 
const DynamicHeader = dynamic(() => import('../components/header'), {
  loading: () => <p>Loading...</p>,
})
 
export default function Home() {
  return <DynamicHeader />
}

dynamic import 적용 전 빌드 결과

dynamic import 적용 후 빌드 결과

 

dynamic import를 적용한 /edit/[userId]의 First Load JS의 사이즈가 232kb -> 180kb로 줄어든것을 확인할 수 있다. 초기 로딩에 불필요한 부분은 dynamic import를 활용한다면 페이지 초기 로딩 시간을 단축시킬 수 있다.