next.js 환경에서 프로젝트를 진행하고 있는데 생각치 못한 오류를 만나 이렇게 정리해보게 되었다! 사소한 오류지만 생각하고 있지 않아서 처음 봤을 때 당황했던 것 같다.
<StFirstPart>
<StFirstText>
가나다라마바사
</StFirstText>
<ImageDiv src={imgParticipantFirst} alt="imgParticipantFirst" className="imgParticipantFirst" fill={true} />
</StFirstPart>이런식으로 div 안에 p태그와 이미지 태그가 함께 있는 div를 여러개 만들었는데 갑자기 중간에 오류가 떴다.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
오류 내용은 다음과 같았는데 처음보고는 서버 문제인가 당황했다. 그래서 문제를 찾던 중 p태그를 div로 바꾸니 에러가 사라졌는데 왜 그런지 궁금해졌다.
문제는 여러개의 div를 내려쓰다보니 중간에 꼬여 p태그 안에 div가 들어가서 문제가 발생했던 것이다 !
Hydration?
React는 Dom에 리액트 컴포넌트를 제공해주는 render 메소드를 제공하고 ReactDom의 render메소드는 컴포넌트를 렌터링 한 후 콜백을 실행하게 된다.
ReactDom의 hydrate라는 메소드도 존재한다.
Next.js는 SSR과 함께 성능 최적화 기능이 들어 있는데 next는 react를 다음과 같은 순서로 사용한다.
1. 서버에서 리액트 컴포넌트를 HTML string 형태로 렌더링한다.
2. 렌더링된 HTML을 클라이언트에게 보낸다.
3. javascript로 된 리액트 코드를 클라이언트에게 보낸다.
4. html을 리액트로 hydrate한다.
즉 next가 HTML 위에 돌돌 말려진 리액트 코드를 푸는것을 hydrate 라고 이해하면 된다. 참고블로그
오류 해결!
즉 잘못된 HTML을 이용하면 서버로 생성된 HTML과 클라이언트에서 생성된 HTML에 차이가 생기기에 이러한 오류가 발생한다! 평소 실수를 해도 오류가 안떠 몰랐던 부분인데 next.js를 사용하면서 최적화와 시맨틱에 대해 생각해볼 수 있었다! 앞으로 좀 더 꼼꼼하게 구조를 짜는 것을 연습해야겠다!
