Hydration Error Next.js

국내주식 | 해외주식 | N잡 | 투잡 | 부동산

개발 작업 의뢰 받음

- React, Django 웹플랫폼 개발 외주

- 각종 크롤러 및 프로그램 개발 외주

- IT 컨설팅, 개발 과외 등 (8만원/시간)

- React.js, Next.js, Open Street Map(OSM), Mapbox, Django Rest Framework, Firebase, Fast API, Expo(RN) Webview

- 현) 스타트업 풀스택 개발 및 연구원

- 서강대 경영 졸업, 크래프톤, ssg.com 출신 및 30명 규모 React SI 업체 창업 후 Pre-IPO 스타트업에 매각.

- 문의: https://open.kakao.com/me/0rich

Hydration Error Next.js

영리치 0 111 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>