[에러해결] Next.js Reference Error: document is not defined

✔️ 필요성

Next.js에서 fusionCharts를 활용한 차트 컴포넌트를 올리니까, 맨 처음에는 차트가 잘 나오는데 새로고침을 누르니까 "Reference Error: document is not defined"라는 에러가 등장한다. 

 

 

✔️ 문제 확인

문제 원인은 Next.js의 장점인 SSR(Server Side Rendering) 때문인데 https://helloinyong.tistory.com/248 여기 블로그에 이유가 상세하게 잘 나와있다. 

• 웹 페이지를 구성시킬 요소들이 렌더링 및 클라이언트로 로드되기 전에 document에 접근하여 View 요소를 조작하려하니 발생한 문제그러나 이 상태에서 새로고침을 하게 된다면, 서버 렌더링이 동작하게 되어 에러가 발생하게 될 것이고, 이는 서버 렌더링이 실행되면 다시 document가 선언되어 있지 않기 때문이란 것을 알 수 있다.
• 이 때는 이미 모든 페이지 렌더링이 끝나고 클라이언트 단으로 페이지 로드가 된 상태이기 때문에 document가 선언이 되어있으므로 정상적으로 모달이 나타나게 된다.

즉, 리프레시를 누르면 document가 일시적으로 다 사라지는데 그 때 차트 컴포넌트가 과연 어디에 그려져야할 지 위치를 못찾아서 나오는 에러이다.

 

document가 생성될 때까지 기다렸다가 그리면 된다.

 

✔️ 문제 해결

Next.js Document에 해당 내용을 잘 설명해놓은 곳이 있다. 이걸 적용하니까 차트가 다른 요소들보다 약간 늦게 뜨지만 오류는 발생하지 않는다!

https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr

Advanced Features: Dynamic Import | Next.js

import dynamic from "next/dynamic";

const ComponentWithNoSSR = dynamic(
    () =>
      import(
        "../../위치"
      ),
    {
      ssr: false,
    }
  );


const Sample = () => {

	return (
    	<ComponentWithNoSSR />
    )
}