인프런 커뮤니티 질문&답변

박세영님의 프로필 이미지

작성한 질문수

풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)

새글쓰기 기능 구현

rendered HTML error 관련

해결된 질문

22.09.13 22:44 작성

·

2K

2

MsgItem 을 이용하여 MsgList 50개를 뽑는 과정에서

Error: Text content does not match server-rendered HTML.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.


오류를 만났습니다. 혼자서 분석해본결과 jay와 roy를 랜덤으로 얻기위한 const getRandomUserId = () => UserIds[Math.round(Math.random())];

이라는 함수를 이용하면 이런에러가 나는것으로 확인되었습니다 선생님 .fill(0).map() 함수에서 getRandomUserId() 를이용하지않고 직접 이름을 "roy" 로 작성하니 오류가 나오지않습니다.. 구글링을해봐도 이유를 알기 어려워서 질문을남깁니다 왜 이런오류가 나오는걸까요.?

답변 2

2

정재남님의 프로필 이미지
정재남
지식공유자

2022. 09. 14. 10:26

하나의 함수를 서버에서도 한 번, 클라이언트에서도 한 번 실행합니다. 함수 실행 결과가 랜덤이라 매 번 값이 달라지니 자연히 "서버와 클라이언트의 text content가 같지 않다"는 오류가 발생할 수밖에 없습니다.

애당초 클라이언트단 작업을 위해 '임시'로 랜덤한 데이터를 내려주기로 한 것입니다. 강의 진행 과정에서 랜덤함수를 없애고 실제 데이터와 연동하면서 자연스럽게 해결될 문제예요 :)

복돌님의 프로필 이미지

2022. 09. 14. 16:22

이해가 됐습니다! 감사합니다!

0

복돌님의 프로필 이미지

2022. 09. 14. 02:11

저도 똑같은 오류가 발생하네요! 서버에서의 랜덤과 클라이언트에서의 랜덤이 달라서 발생하는 오류같은데, 명확한 해결법은 저도 모르겠네요. 강사님께서 알려주시면 좋을 것 같습니다!