서버사이드렌더링 실무 개발 프로세스에서의 순서 질문입니다

Question

if ( fullUserWithoutPassword ){ const data = fullUserWithoutPassword . toJSON (); // 시퀄라이즈에서 보낸 데이터는 JSON이 아님 data . Posts = data . Posts . length ; // length로 바꿔주는 이유는 Posts를 통으로 보내면 개인정보 data . Followers = data . Followers . length ; // 가 여과없이 전송되기 때문. data . Followings = data . Followings . length ; // 이를 위해 JSON으로 변환을 한 것임. data . nickname = fullUserWithoutPassword . nickname ; return res . status ( 200 ). json ( fullUserWithoutPassword ); } 위는 GET /user/:userId 라우터에서 프론트단으로 데이터를 넘겨주는 부분입니다. 리턴문을 보시면 아시겠지만 데이터 전송을 원래 의도라면 data를 보내야 하지만 실수로 fullUserWithoutPassword로 보내서, 프론트단에서 userInfo를 참조할 때(원래 userInfo는 Followers, Followings, Posts만 가지고 있으며, [id].js에서만 nickname을 사용하기 때문에 제가 임의대로 nickname을 추가시켰습니다) useInfo.nickname참조에서 오류가 나서 에러페이지가 발생합니다. 문제는 이를 서버사이드렌더링으로 하면 "Objects are not valid as a React child (found: object with keys {id})" 에러가 _document.js파일에서 발생하고, 이는 서버단에서 프론트 페이지 데이터를 처리하는 중에 일어난 오류이기 때문에 리덕스 데브툴즈에서 잡을 수가 없어서 에러 원인을 파악하는데 상당히 오랜 시간이 걸렸습니다. (실제로 에러 발생 파일이 직접적으로 연결된 router/user.js에서 발생하는 것이 아니라 pages/_document.js에서 발생하기 때문에 도대체 어디가 문제인지 쥐잡듯이 찾아보다가 [id].js 파일 서버사이드렌더링 부분에서 LOAD_USER_REQUEST디스패치를 주석처리하고 돌려봤더니 잘 돌아가길래 거기서 힌트를 얻어서 겨우 파악했습니다ㅠ) [id].js처럼 처음부터 서버사이드로 만들면 에러 파악하기가 힘들다고 개인적으로 느꼈는데 실무에서는 어떤지 궁금합니다! 실무에서도 서버사이드렌더링 파트를 제일 마지막에 진행하나요?

제로초(조현영) · Answer

아뇨. 처음부터 진행합니다. SSR 시 발생하는 에러는 서버쪽에서 찍히기 때문에 next.js 개발 하다보면 서버쪽 데이터 문제라는 것을 쉽게 찾을 수 있습니다. 특히 redux 관련된 에러라고 추측되는 경우는 hydrate 부분 콘솔로그 찍어보면 확인됩니다.