Portfolio

다른 팀의 레포지토리를 보다가 Window 객체를 쓸 수 없는 상황이 발생했다는 오류를 발견했다.

이는 Next.js에서 서버 사이드 렌더링과 클라이언트 사이드 렌더링 모두를 관리하기 때문이었다.

가령, 서버사이드 렌더링을 할 때에는, 이 친구는 우리가 클라이언트 사이드 렌더링을 한다는 것을 인지하지 못한다.

따라서, 이를 빌드할 때, CSR과 SSR이 충돌해버리는 것이다.

Next.js는 서버 사이드에서 먼저 실행 되고, 그 후에클라이언트 사이드에서 실행된다. 그런데 윈도우 객체는 클라이언트 사이드에만 존재한다. 따라서 윈도우 객체를 사용하고 싶다면 componentDidMount 라이프사이클 메서드 내에 코드를 작성해야한다.

그것도 싫다면, next/dynamic을 사용하자. 특정 조건에서만 동적으로 import하도록 설정할 수 있으며, ssr:false처럼 지정할 수도 있다.

Window is not defined