hydrate
: SSR을 하면서 나오는 개념이다. SSR의 경우 pre-rendering를 통해 완성된 HTML을 클라이언트에게 전달한다.
- 서버에서 렌더링된 정적 페이지를 클라이언트에게 보낸다.
- react는 번들링된 JavaScript 코드를 클라이언트에게 보낸다.
- 클라이언트는 전달받은 HTML과 JS코드를 매칭하는 Hydrate를 수행한다.
- Hydrate란 전송받은 JavaScript들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링하게 되면서 각각 자기 자리를 찾아가며 매칭된다.
→ Next.js 프로젝트에서 개발한 리액트 컴포넌트를 프론트 엔드에서 실행하는 것을 하이드레이션(Hydration)이라 부른다. Next.js는 코드를 이미 HTML로 렌더링한 상태에서 만약 리액트 컴포넌트와 자바스크립트가 로드되지 않았더라도 빈 화면이 아닌 기본 값으로 구성된 페이지를 볼 수 있다. 비로소 자바스크립트의 로드가 완료되었을 때 모든 요소들이 나타나게 되며, 그 후 리액트 앱처럼 작동한다.
또한, GIF 이미지같이 잠깐의 스타일 깜빡임이 Next.js에서 나타나는 일반적으로 많이 보인다. 새롭게 페이지를 로딩할 때마다 약간 뒤늦게 스타일이 적용되는 것처럼 보인다. HTML DOM 요소에 뒤늦게 자바스크립트가 동작하고, Hydration 돼서 나타나는 현상이다.
자바스크립트로 외부 서버에 웹폰트를 요청해서 받아오는데, Hydrate 이전에는 웹 폰트를 아직 요청하지 못해 적용되지 않아서 그러하다.
두번 렌더링하는 방식
서버 단에서 빠르게 Pre-Rendering하고 유저에게 빠른 웹 페이지로 응답할 수 있다는 것은 큰 이점이다. Pre-Rendering한 Document는 모든 자바스크립트 요소들이 빠진 굉장히 가벼운 상태이며, 클라이언트에게 빠른 로딩이 가능하다.이는 같은 화면에 대해 두 번 렌더링이 일어난다는 단점을 보완한다.
클라이언트 단에서 자바스크립트가 렌더링을 할 때, 단지 각 DOM 요소에 자바스크립트 속성을 매칭 시키기 위한 목적이므로 실제 웹 페이지를 다시 그리는 과정까지는 하지 않는다. Paint 함수까지 호출하지 않는다는 말이다. Paint함수가 뭔지 모른다면 life cycle을 공부하는 것을 추천한다.
TTV와 TTI의 개념
