[오늘난에러] rendered HTML error

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가 같지 않다"는 오류가 발생하게 된다. 서버와 클라이언트에서 같은 값을 사용할 수 있도록 정식 데이터를 사용하여 해결하자.