Hydration Error Next.js

영리치 0 222 01.11 08:37

Error: Text content does not match server-rendered HTML. See more info here: https://nextjs.org/docs/messages/react-hydration-error

다음과 같은 Hydration Error 발생

해당 이슈는 서버사이드 렌더링에서 렌더 전에 계산한 시간과 렌더 후의 시간이 달라서 발생하는 이슈임

즉, Date 타입에서 렌더 전에 먼저 선언 후 그 선언을 렌더 후에 보여주면 시간 값이 달라지니까 글자가 달라질 꺼 아님?

시간은 계속 변하니까

그래서 그거 다르다고 저렇게 징징대는거임

본인의 경우 이럼

routingStartTime: Date = new Date();
  routingEndTime: Date = new Date();

<TimeSliderTextBox>
            <Text style={{ color: "white", display: "block" }}>
              {MapStore.routingStartTime.toLocaleTimeString()}
            </Text>
            <Text
              style={{ color: "white", display: "block", marginLeft: "auto" }}
            >
              {MapStore.routingStartTime.toLocaleTimeString()}
            </Text>
          </TimeSliderTextBox>