Hydrate
:HTML코드와 React인 JS코드를 서로 매칭시키는 과정
서버사이드에서 클라이언트 사이드한테 렌더링 된 정적 페이지, 번들링된 JS파일 보냄. 클라이언트는 받아서 HTML,JS 서로 매칭
정적인 페이지에 물을 주어 동적으로 만듦
이것에 대해 알아보기 전 리엑트의 웹페이지 구성원리에 대해 알아보자
React에서의 웹페이지 구성 원리
- 도메인 주소(www.naver.com)에 접속
- DNS 서버는 해당 도메인 주소에 맞는 IP주소로 요청을 보내줌
- 서버는 클라이언트에게 HTML documentI(index.html), JS파일(App.js)를 보내줌
- 서버로부터 받아온 파일들로 Render Tree 구성하고 웹화면을 렌더링
React는 JS파일만을 이용하여 웹화면을 구성하는 원리를 가지고 있음.
그래서 실제 HTML코드는 안에 내용이 하나도 없음
단순뼈대만 있는 HTML document와 JS파일을 클라이언트에게 보내면, 클라이언트는 이 JS코드들을 통해 웹화면을 렌더링하며 페이지를 그리게됨
public/index.html은 알다시피 아무내용없고 뼈대만 있음.
src/index.js의 자바스크립트 코드에서 모든 화면을 렌더링 한 뒤 HTML DOM요소 중 root라는 아이디를 가진 엘리먼트를 찾아서 하위로 주입하게 된다.
Next.js에서의 웹페이지 구성 원리
리엑트와는 다르게 Next.js는 클라이언트에게 웹 페이지를 보내기전에 서버 사이드 단에서 미리 웹페이지를 Pre-Rendering 함.
그리고 그렇게 생성된 HTML document를 클라이언트에게 전송함.
즉, React처럼 빈껍데기인 index.html이 아니라 pre-rendering된 HTML 파일을 보내는 거임
하지만 알다시피, 현재 클라이언트가 받은 웹 페이지는 단순히 웹 화면만 보여주는 HTML이다.
자바스크립트 요소는 하나도 없음(=JS모듈,이벤트리스너들이 DOM요소에 적용안된 상태)
프로젝트를 실행하고 네트워크 탭을 누르면
맨처음 Pre-rendering된 document 파일을 받고, 이후에 렌더링된 JS파일들이 Chunk단위로 다운로드 되는것을 볼 수 있음.
그리고 이 JS코드들이 이전에 보내진 HTML DOM 위에서 한번 더 렌더링을 하면서, 각자 자기 자리를 찾아가며 매칭이 됨
->이 과정을 Hydrate이라고 부름
✔️ Pre-rendering한 Document는 모든 JS요소들이 빠진 가벼운 상태이므로 클라이언트에게 빠른 로딩이 가능함. 두번 렌더링이 일어나는 단점을 보완하고도 남음
