[Nextjs] dynamic import 에 대하여

nextjs 에서 라이브러리를 사용하다보면 ReferenceError: window is not defined 에러가 날때가 있다.

라이브러리에서 window 객체를 사용하지만 nextjs 는 서버사이드에서 초기 정적페이지를 생성해주기 때문에 window 객체가 없기때문에 나오는 에러이다.

 

내가직접 window 객체를 사용한 코드(web storage, 화면크기?, ...)라면 렌더 이후에 실행되는 코드인 useEffect안에서 window 객체 확인이후에 코드를 작성해주면 되지만 라이브러리를 사용하는경우에는 다른방법 사용해야한다.

 

이때 dynamic import 를 사용하면 해결이 가능하다.

import dynamic from 'next/dynamic'

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

이때 그냥 import featrue from "../components/feature" 와 위 방식에 차이를 알아보자

극단적으로 생각해서 만약 import 를 했지만 해당 모듈을 사용하지 않더라도 우리는 이미 모듈을 가져오는데 리소스를 사용한셈이다.그러나 dynamic import의 경우 모듈을 사용할때 불러오기 때문에 사용하지않더라도 손해가 없다.극단적으로 이야기 했지만 페이지내에서 하단에 위치하거나 아예다른 페이지인 경우 역시 같다고 볼수있다.

 

근데 여기까지 이야기는 dynamic 에 대한 이야기지 위의 에러와는 상관이 없는 이야기이다.다만 dynamic을 사용하는 경우 서버측에서 실행시에 모듈을 불러올지 말지를 ssr: false 옵션을 통해서 정해줄수 있게되는데 해당옵션을 이용할경우 window 객체가 없는 서버측에서는 모듈을 불러오지 않음으로써 에러를 방지할수 있다라는게 에러에 대한 내용이다.

 

그니까 해당 에러해결을 위한 목적이외에도 코드스플리팅을 구현하는 방법으로도 사용할수 있다라는 아니 그게 주요 목적이라는 점을 남기고 싶었다.