const UserIds = ["eun", "chae"];
const getRandomUserId = () => UserIds[Math.round(Math.random())];
const Data = Array(50)
.fill(0)
.map((_, i) => ({
id: i + 1,
userId: getRandomUserId(),
timestamp: 123456780123 + i * 1000 * 60,
text: `${i + 1} mock data`,
}))
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: 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.
eun / chae 를 랜덤으로 얻기위한 const getRandomUserId = () => UserIds[Math.round(Math.random())] 함수에서 에러가 발생
함수를 사용하지 않고 userId에 하드 코딩 시에는 에러가 발생하지 않는다.
함수 실행 결과가 랜덤이라 매 번 값이 달라지기 때문에 "서버와 클라이언트의 text content가 같지 않다"는 오류가 발생하게 된다. 서버와 클라이언트에서 같은 값을 사용할 수 있도록 정식 데이터를 사용하여 해결하자.