Next.JS에서 내부적으로 사용하는 ReactDOM.hydrate 함수는 다음과 같은 일을 한다.

1. 서버에서 받아온 DOM tree와 자체적으로 렌더링한 tree를 비교한다.
2. 두 tree 사이의 diff를 얻어낸 뒤, 자체적으로(클라이언트사이드) 렌더링 한 tree에 맞춰 patch를 적용한다.

컴포넌트들

우리의 예상

현실

• 막 마운트 됐을때 기준으로 서버사이드 트리와 클라이언트 사이드를 비교한다

patch 시 트리끼리 타입과 순서만 비교한다

• $S0과 $C0은 동일하게 생각되고 $S1 은 클라이언트 사이드에서 마운트시 삭제가 되었다고 생각된다
• $C0은 재호출 되지않고 style="color:red" 와 같은 속성들은 유지된 채 $S0의 chidlren인 text만 바꿔 껴지게 된다

결과