Hydration
단순 HTML을 React applaction으로 초기화 하는 작업이다.(HTML 위에서 React Application을 실행한다는 의미)
예를 들어 React 를 Initialize하여 onClick를 부착해 여기서 작성 가능 한 기능을 수행하도록 하는 것이다.
/aout-us 접근 => <button>0</button> => 사용자 확인 이후 => <button onClick={()=>이벤트수행}></button>
마치 위의 상태로 있는 것이다.
그리고 먼저 렌더링 한 후에 뒷단에서 next.js를 로딩하고 framework 를 초기화 하고 React application을 생성하는 것이다.
그러면 버튼이 interactive해지고 eventListener가 생기는 것이다.
🤔 render()
ReactDOM.render(element, container, [callback])
- element: 화면에 그려진 React element (집어넣어 줄 요소)
- container: React element를 해당 container DOM에 렌더링 (구체적인 위치)
- callback: 렌더링 후 반환되는 값을 돌려주는 콜백 함수
CRA하게 되면 index.js에 다음 코드를 쉽게 볼 수 있습니다.
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));즉, <App/> 컴포넌트를 root라는 id를 가지고 있는 엘리먼트 내부로 넣어주어 페이지를 렌더링 해주고 있습니다.
🤔 hyrate()
ReactDOM.hydrate(element, container, [callback])
기본적으로 render()와 동일하지만, ReactDOMServer로 렌더링된 HTML에 이벤트 리스터(자바스크립트 코드)를 연결해주기 위해 사용됩니다.
서버 사이드를 통해 이미 HTML에는 엘리먼트들이 채워져 있죠? 따라서 다시 render 해줄 필요 없이 hydrate를 통해 기존 마크업에 이벤트 리스너를 붙여주는 과정입니다.
위 과정들을 정리해봅시다.
Next.js는 서버에서 HTML을 문자열로 가져온 후에, 클라이언트에서 서버로부터 보내준 HTML을 render(), hydrate()하여 브라우저에 렌더링 했습니다. 이 일련의 과정을 Hydration이라고 합니다!
Hydration 사전적 정의
[명사] 수분 공급
서버의 데이터가 클라이언트의 DOM과 결합하는 과정을 빗대어 hydrate라는 단어로 정의된 것 같습니다.
React는 클라이언트 렌더링만 있어, 유저에게 보여줄 HTML, CSS 그리고 자바스크립트 모두 render() 함수를 이용해 생성하여, 모든 리소스를 한번에 렌더링합니다.
반면, Next.js는 서버에서 보여줄 HTML 컨텐츠를 미리 렌더링(내용을 채워서)하여 가져오기 때문에 render() 함수로 HTML 뼈대만 렌더하고, hydrate()를 통해 서버에서 받아온 HTML에 유저가 상호작용할 수 있는 이벤트 리스너(JS파일)을 연결하는 것입니다.
HTML에 JS파일(수분💦)을 주입한다고 해서 hydrate라고 이해할 수 있겠습니다!
client
client 에서 hydrdate 되어 interactive 하게 만들어질 components는 오직 use client 지시어를 최 상단에 갖고있는 컴포넌트만 가능하다.
따라서 Navigation 만 hydration 되는 것이다.
백엔드에서 render되고 프론트엔드에서 hydrate된다는 것이다.
이는 data fetch 되는 방식에서 중요한 개념이다.
useQuery, useEffect ... 등등은 이제 안 쓸것이다.
hydrate장점
: Javascript를 선택적으로 작은파일만 다운로드 하게 할 수 있다. 그래서 백엔드에서 HTML을 먼저 preRender할 수 있다. 그리고 use client를 작성하면 그 child는 모두 client component가 된다. 그리고 server component 에서 fetch를 진행하면, 보안을 신경쓰지 않아도 된다. client에서 render 되기 때문! 그래서 API키를 넣거나 DB에 접근해도 된다.
