실제 배포후 사용중인 현재 이 블로그에서 react error #423 이 발생했다.

There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

먼저 에러 자체에 대해 알아보았다. #423 에러는 초기에 렌더링된 ui가 서버에서 렌더링된 것과 다르다는 내용의 에러였다.

에러에 대해 알아보고도 아직 감이 잘 잡히지 않아 프로덕션 실행로그를 확인해보았다.

nest.js 서버에서는 아무런 에러가 발견되지 않았고 next.js 클라이언트 서버에서

아래와 같은 에러 로그가 발견되었다.

ERROR TypeError: fetch failed at Object.fetch (node:internal/deps/undici/undici:11576:11) at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

이걸 확인하고 데이터 fetch가 잘못되었구나 생각이 들어 코드를 확인하고 문제점을 발견했다. 데이터 fetch 과정에서 분기를 할때 데이터의 타입이 맞지 않아 잘못된 분기를 타고 있었다. 그렇기에 데이터 fetch 가 필요없는 기능에서 추가적인 데이터 fetch 가 이루어저 ssr이 작동될때 csr로 작동하는 페이지와 ui가 다르게 구성되었다.