Next.js로 모니터링 대시보드 웹 애플리케이션 개발시에 로컬서버에서는 보이지 않던 오류가 빌드, 배포후에 나타나기 시작했다.
각 page에 최초 진입시 마다 경고성 오류가 계속 뜨는 상태였으나 동작에는 문제가 없었으므로 콘솔창을 띄우지 않는다면 무시할 수 있는 오류였다.
해당 오류는 다음과 같다.
Uncaught Error: Minified React error #418;...
Uncaught Error: Minified React error #423;...
Uncaught Error: Minified React error #425;...동일한 케이스의 레퍼런스를 찾지 못하던중, vercel/next.js 깃허브에서 이슈를 발견했다!
(https://github.com/vercel/next.js/issues/37489)
이슈에 달린 많은 의견을 참고하여 가능한 케이스를 전부 테스트 하였으나 최초 빌드시에 위 에러가 계속해서 나타났다.
- Node.js 버전 변경(영향없음)
- nvm으로 로컬에서 변경후, 빌드, 배포시에도 버전 변경 하였으나 영향없음. - React 버전 18 -> 17 다운그레이드(심각한 side effect 발생)
- useEffect 체크(문제없음)
- Suspense, lazy (영향없음)
- 공통으로 사용하는 Layout 컴포넌트 체크(문제없음)
- Mqtt connect, subscribe 컴포넌트 체크(문제없음)
- 최초 렌더링시에, import 컴포넌트를 하나씩 체크(문제없음)
- Apex Chart 체크(문제없음)
React, Next.js의 버전 문제로 치부하고 넘어가려고 했으나, React 공식 문서에서 오류 문구 중 Suspense가 있는 것을 확인 후 해당 부분을 테스트했다.
There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
pages폴더의 index.tsx에서 최초 렌더링해주는 컴포넌트를 Next.js의 dynamic 함수를 사용하여 컴포넌트를 import하니, 오류가 모두 해결되었다.
다음은 해결된 코드이다.
// pages/index.tsx
import DashboardContainer from "../containers/dashboard";
// ssr 없이 동적 import
const DashboardContainer = dynamic(() => import("../containers/dashboard"), {
ssr: false
});헤맨시간에 비해 비교적 간단히 해결이 되었다.
추가로, 아래 오류까지 해결되었다.
WebSocket connection to 'ws://localhost/' failed: SSR 개발시에, 클라이언트 측에서만 구성 요소를 렌더링해야하는 경우와 서버 측에서 렌더링해야하는 경우를 잘 구분하여 개발하도록 해야겠다.
