Hydration Error Next.js


개발 작업 의뢰 받음

- 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>


이런 경우 발생함

이걸 해결하려면 useEffect로 렌더 후에 값을 변경해주는 로직들이 들어가면 됨

나는 걍 그냥 any 타입 후 null로 선언해놓고 렌더 후에 값을 변경해줄 듯




Comments


개발 작업 의뢰 받음

- 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


Category
Magazine
훈남/훈녀
 
 
 
상점
Facebook Twitter GooglePlus KakaoStory NaverBand