hydrate

결론: SSR 시 서버 렌더링(트리) 된 것과 클라이언트에서 렌더링(트리) 된 것이 다르면 안 된다.(hydration 오류)

이유: paint 과정이 두 번 발생해서 좋지 않다.

설명:

1. ReactDom.hydrate

ReactDom.hydrate(리액트컴포넌트, 서버에서 만든 HTML)

서버에서 받은 html을 받는다. -> 화면에 보여준다. -> hydrate가 서버에서 만든 HTML과 리액트 컴포넌트를 받는다 -> hydrate가 리액트 컴포넌트를 토대로 다시 DOM을 만든다, -> 만든 DOM을 서버에서 받은 HTML과 비교한다. -> 일치하면 자바스크립트를 적용해서 interactive하게 만든다. -> 일치하지 않으면 새로 만든 DOM으로 화면에 다시 그린다.(hydration 오류)

2. hydrate error 발생 예시

3. 데이터 패칭 경우

서버에서 서버 패치 받은 후 SSR 했을 경우, 클라이언트에서 hydration 하기 위해 또 패치 받아서 렌더링 후 비교하고 js 적용하면 패치를 두 번 받게 된다. 이런 경우 패치를 한 번 받도록 처리를 해준다. 프레임워크가 이를 잘 해주고 있다.