개발자

next.js hydrate가 무엇인가요? (Did not expect server HTML to contain the text node)

2022년 11월 24일조회 265

안녕하세요 next.js로 개발하고 있는 1년차 뉴비 프론트엔드 개발자입니다. 페이지에서 간헐적으로 문구가 안보이는 이슈가 있어 콘솔을 확인해보니 'Did not expect server HTML to contain the text node' <- 이런 에러가 발생하고 있었습니다. 검색하다가 hydrate하는 과정에서 mismatch가 생겨서 발생한 에러라는 영어 댓글을 보긴 했는데 hydrate에 대한 설명을 찾아봐도 너무 어렵더라구요.. 혹시 간단하게라도 hydrate에 대해 설명해주실 수 있으신가요? 또 'Did not expect server HTML to contain the text node'에러는 왜 발생했는지 궁금합니다..

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

성원님의 프로필 사진

해당 문구가 서버에서 받는 html에 잘 찍혀서 오나요? (undefined는 아닌지 궁금합니다) 아니면 클라이언트로 넘어왔을 때 문구를 콘솔에 찍으면 잘 나오나요? 간헐적인 이슈라면 서버나 클라이언트에서 undefined를 찍는 것 같습니다. 먼저 확인해보셔야 할 것 같아요!

profile picture

익명

작성자

2022년 11월 24일

서버에서 받는 html에는 잘찍혀 나오는데, 클라이언트 콘솔에 찍어보니 처음 렌더링할 때 undefined값이 나옵니다..!

성원님의 프로필 사진

성원

Software Engineer2022년 11월 25일

그렇군요, SSR결과가 hydrate되지 못해서 발생하는 오류 같습니다. hydrate는 서버에서 렌더링한 HTML 결과가 클라이언트로 넘어와서 리액트의 렌더결과(버츄얼 돔트리)와 비교된 뒤 변경사항에 따라 최종 돔트리를 생성하는 과정입니다. 변경과정에서 클라이언트 렌더링결과를 최신 변경사항으로 보고 서버 HTML과 다른 부분이 있으면 해당 부분을 업데이트 합니다. 질문자님의 상황에서는 서버에서 잘 내려오는 Text Node가 클라이언트에 왔을 때 undefined로 나오면서 hydrate과정에서 클라이언트 결과에 따라(undefined) 아무것도 그리지 않는 현상인 것 같습니다. 콘솔에 undefined 찍히는 원인을 찾아서 해결하면 (왠지 클로저 이슈로 Text Node를 참조하는 변수가 undefined인 것 같습니다), 위에러도 같이 해결될 것 같아요!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!