저번 포스트에 이어 Star-breaker-raid 프로젝트 중 발생한 문제를 포스팅합니다.
Minified React error이란?
여러 프로젝트를 해왔지만 처음 맞닥뜨린 에러입니다. 이 오류는 React와 Next.js의 SSR과 CSR 차이로 인해 발생하는 Hydration error입니다.
Next.js는 Hydration를 지원하는데요, 일명
수분 공급이라고 합니다. React에서 Hydration은 SSR과 CSR를 구분하고 SSR부분은 서버에서 랜더링하고 브라우저에 구멍이 뚫린 HTML를 보내고 브라우저에서 JavaScript 기능을 입혀서 CSR 부분을 랜더링해 하나의 페이지가 되는것을 말합니다.
이를 비유적으로 말라가는 나무에 수분을 공급한다고해서수분 공급이리고 지칭합니다.
React가 랜더링을 진행하면서 서버에서 랜더링한 결과와 CSR에서 랜더링한 결과가 다르다면 hydration이 불일치하여 오류 발생합니다.
Minified React error #418, #423, #425
리엑트 Minified React error #418에 관한 페이지에서 코드의 오류가 발생했을때 이유
저의 경우는 #418 오류는 세 번째 날짜 매칭이 잘못되어서 발생한 오류입니다..
주석을 하여 문제를 확인한 이미지 입니다.
제가 작성한 코드는 CSR에서 날짜를 변경 했는데 서버에서 랜더링한 결과와 클라이언트 랜더링한 결과의 시간이 달라서 일어난 오류였습니다.
이 프로젝트는 Vercel에 배포 중이며 서버의 시간은 UTC 기준으로 작동하고 있습니다. 그렇기에 지금 현재 한국 표준시(KST)로 CSR에서 바꾸게 된다면 SSR에서 랜더링된 것과 CSR에서 랜더링된 시간이 일치하지 않아 오류가 발생했습니다..
#423 문제 또한 랜더링 문제로 발생한 에러
#425 문제 또한 서버와 텍스트가 매칭되지 않아서 생긴 문제입니다.
문제 해결
서버의 시간대는 UTC로 설정되어 있고, CSR에서는 받아온 데이터를 한국 시간대로 변경하면서 랜더링에 불일치가 발생하게 되었습니다. 오류를 해결하기 위해서 SSR의 시간을 한국 시간으로 변경해서 랜더링 차이가 발생하지 않게 하면 해결됩니다.
SSR에서 데이터 패치를 진행하고 있기에 아래와 같이 문제를 해결했습니다.
데이터 패치한 결과에 map 함수를 사용해서 시간을 변경 했습니다.
그럼 서버측에서 랜더링 할 때부터 한국의 시간으로 변경되어 CSR에서도 변경이 없기에 문제가 완전히 해결이 되었습니다.
회고
이번 문제는 Hydration의 원리와 원칙을 찾아보게하는 문제였습니다. 기능 구현으로 발생한 오류가 아니라 랜더링으로 발생한 문제를 처음 맞닥뜨려서 처음은 당황했고 어느 부분이 문제인지 몰라 당황했지만 Hydration의 모르고 있던 SSR, CSR 랜더링의 차이가 나면 안된다는 부분을 지적해주는 문제라는 점에서 얻어가는게 큰 문제였습니다.
[참고]
