Nextjs로 프로젝트를 만드는데 캘린더가 들어갈 곳이 있어서 react-calendar이라는 라이브러리를 사용했다.
calendar를 화면에 띄울 때
Hydration failed because the initial UI does not match what was rendered on the server.
라는 에러가 떴다.
에러난 부분을 검색을 해보니 밑에 참조에서 잘 설명해주신대로 react-calendar가 영문을 한글로 번역하는 과정에서 에러가 났다.
그렇다면 브라우저를 거치기 전에 영문을 한글로 변경해주면 된다.
react-calendar공식문서에 locale부분을 보면 IETF-language tag에 의거 한국어는 'ko'로 설정해주면 해결된다.
오류를 해결하고 나니 Hydration이 무엇인지 궁금해졌다.
Hydration
React는 CSR로, 처음에 브라우저가 빈 HTML을 파일을 받아 아무것도 보여주지 않다가, 사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여준다.
반면, Next.js는 모든 페이지를 미리 렌더링(pre-render)한다. 이는 Next.js가 모든 일을 클라이언트 측에서 모든 작업을 수행하는 것이 아니라, 각 페이지의 HTML을 미리 생성하는 것이다.
클라이언트가 받는 웹 페이지는 js요소가 들어있지 않은 HTML껍데기이다.
특정 JS 모듈 뿐 아니라 단순 클릭과 같은 이벤트들이 각 웹 페이지의 DOM 요소에 적용되어 있지 않은 상태의 페이지가 전송되는 것이다.
생성된 HTML껍데기는 해당 페이지에 필요한 최소한의 자바스크립트 코드와 연결된다. 그 후 브라우저에 의해 페이지가 로드되면, 자바스크립트 코드가 실행되어 페이지와 유저가 상호작용할 수 있게 된다.
이러한 과정을 마른 껍데기에 물을 준다고 해서 hydration(수화)이라 한다.
참조
https://velog.io/@juurom/TIL-react-hydration-error-%EC%9B%90%EC%9D%B8-%EB%B0%8F-%ED%95%B4%EA%B2%B0%EB%B0%A9%EB%B2%95-feat.-react-calendar 나와 같은 오류인데 정말 잘 설명해주셨다!! 감사합니다.
https://www.howdy-mj.me/next/hydrate Nextjs의 렌더링 과정 알아보기
https://velog.io/@hamjw0122/Next.js-Hydration Nextjs Hydration
