[Next.js] render 가 두번씩 되는 현상.

next.js 에 외부 라이브러리들을 dynamic import 해서 사용하고 있는 도중 두번씩 렌더링 되는 현상 관측.

 

그래프가 두번씩 랜더링 되길래 console 쳐보니까 콘솔로그도 두번씩 찍힘.

 

처음에 dynamic import 가 문제인가 해서 찾아보고, useEffect 에 뭐잘못했나 찾아보고 하는 도중

그 상위 컴포넌트에서도 콘솔 두번씩 찍히는거 확인.

 

최상위 _app.js 까지 올라가서 콘솔 찍어봤는데 심지어 거기서도 두번호출..

 

구글링 하던 도중 알아낸 사실은 React.StrictMode 가 true 인 경우 그렇다고 한다.

https://ko.reactjs.org/docs/strict-mode.html

Strict 모드 – React

개발모드에서만 활성화 되기 때문에 프로덕션 빌드에는 영향을 미치지 않는다지만.

지금 그래프가 두번씩 로드되니까 해당 설정을 false 로 바꿔줌

 

[next.config.js]

 

수정해주고 npm run dev 재 실행 해주니까 

예쁘게 한번씩만 렌더링 됨!