rendered HTML error 관련

Question

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" 로 작성하니 오류가 나오지않습니다.. 구글링을해봐도 이유를 알기 어려워서 질문을남깁니다 왜 이런오류가 나오는걸까요.?

정재남 · Answer

하나의 함수를 서버에서도 한 번, 클라이언트에서도 한 번 실행합니다. 함수 실행 결과가 랜덤이라 매 번 값이 달라지니 자연히 "서버와 클라이언트의 text content가 같지 않다"는 오류가 발생할 수밖에 없습니다. 애당초 클라이언트단 작업을 위해 '임시'로 랜덤한 데이터를 내려주기로 한 것입니다. 강의 진행 과정에서 랜덤함수를 없애고 실제 데이터와 연동하면서 자연스럽게 해결될 문제예요 :)

복돌 · Answer

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