Hydration Error Next.js

나의 재물운? 연애운은?

AI가 봐주는 내 사주팔자 - 운세박사

https://aifortunedoctor.com/

Hydration Error Next.js

영리치 0 1,129 2023.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

나의 재물운? 연애운은?

AI가 봐주는 내 사주팔자 - 운세박사

https://aifortunedoctor.com/

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