개발자
안녕하세요 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'에러는 왜 발생했는지 궁금합니다..
답변 1
해당 문구가 서버에서 받는 html에 잘 찍혀서 오나요? (undefined는 아닌지 궁금합니다) 아니면 클라이언트로 넘어왔을 때 문구를 콘솔에 찍으면 잘 나오나요? 간헐적인 이슈라면 서버나 클라이언트에서 undefined를 찍는 것 같습니다. 먼저 확인해보셔야 할 것 같아요!
익명
작성자
2022년 11월 24일
서버에서 받는 html에는 잘찍혀 나오는데, 클라이언트 콘솔에 찍어보니 처음 렌더링할 때 undefined값이 나옵니다..!
성원
Software Engineer • 2022년 11월 25일
그렇군요, SSR결과가 hydrate되지 못해서 발생하는 오류 같습니다. hydrate는 서버에서 렌더링한 HTML 결과가 클라이언트로 넘어와서 리액트의 렌더결과(버츄얼 돔트리)와 비교된 뒤 변경사항에 따라 최종 돔트리를 생성하는 과정입니다. 변경과정에서 클라이언트 렌더링결과를 최신 변경사항으로 보고 서버 HTML과 다른 부분이 있으면 해당 부분을 업데이트 합니다. 질문자님의 상황에서는 서버에서 잘 내려오는 Text Node가 클라이언트에 왔을 때 undefined로 나오면서 hydrate과정에서 클라이언트 결과에 따라(undefined) 아무것도 그리지 않는 현상인 것 같습니다. 콘솔에 undefined 찍히는 원인을 찾아서 해결하면 (왠지 클로저 이슈로 Text Node를 참조하는 변수가 undefined인 것 같습니다), 위에러도 같이 해결될 것 같아요!
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!