Next.js Hydrate 는 무엇이냐?

저번에 React와 Next를 비교하면 Next공식 문서를 읽으며 Next가 어떻게 SSR 동작하는지에
대해 조사해 보았었다.

https://zoon-bloom.tistory.com/112

Next 와 React

이후에 좀 더 Next에 대해 알아보다 Pre-rendering과 Hydrate라는 것을 발견하였다.

Next 동작 과정을 보면 Pre-rendering 과 hydrate에 대해 알 수 있다.

 

 Next.js 동작과정- 초기화면 수행 (SSR 방식 이용)
1. 사용자가 홈페이지를 접속한 경우(최초 접속) 클라이언트는 이를 확인하고 서버로 요청합니다.(Server-Side)
2. 서버에서는 미리 구성된 HTML, CSS 파일을 클라이언트에게 전달합니다.(Pre-Rendering - init Load)
(* Initial Load : JS 동작이 없는 HTML을 먼저 화면에 보여주는 것을 의미)
3. 이 과정에서 동시에 서버에서는 스크립트 파일을 수행하여서 클라이언트에게 전달합니다.(Hydration)
(* Hydration : Initial Load 이후 JS 파일을 HTML에 연결하는 과정을 의미)

 Next.js 동작과정- 페이지 이동 / 동작이 발생하는 경우(CSR 방식 이용)
1. 페이지 이동 및 동작이 발생하는 경우에는 CSR 방식을 통해서 서버를 거치지 않고 브라우저에서 페이지를 이동한다.

 

 

React에서는  CSR(Client-side Rendering)로, 처음에 브라우저가 빈 HTML을 파일을 받아 아무것도 보여주지 않다가,
사용자의 기기에서 렌더링이 진행되어 한 번에 화면을 보여주게 된다.

Next는 Pre-Rendering 된 웹 페이지를 클라이언트에게 먼저 보내고 (inital load html),
React가 번들링 된 자바스크립트 코드들을 클라이언트에게 전송하며

이렇게 받아온 파일들을 HTML DOM 요소 위에 한번 더 렌더링 하면서 렌더링을 하게 되는데
이 과정을 hydrate라고 한다!.

Next.js는 서버에서 HTML을 문자열로 가져온 후에, 클라이언트에서 서버에서 보내준
HTML을 hydrate() 혹은 render()하여 브라우저에 렌더링 된다. 이 과정을 Hydration이라 부르고 

React는 클라이언트 렌더링만 있어서 유저에게 보여줄 HTML, CSS 그리고 자바스크립트 모두 
render() 함수를이용해 생성하여, React가 어떤 DOM을 렌더 하는지 알려준다.

반면, Next.js는 서버에서 보여줄 HTML 콘텐츠를 가져오기 때문에 재차 render() 함수로
HTML을 생성하여 DOM을그리는 일은 비효율적이다.
따라서 hydrate() 함수로 서버에서 받아온 HTML에 유저가 상호작용할 수 있는
이벤트 리스너만 연결한다고 한다.

 

리액트와는 다르게 Pre-Renderingn 된 Document는 자바스크립트 요소가 빠진 가벼운 상태이기 때문에
클라이언트 측에서 빠르게 로딩이 가능한 장점이 있고.

이후에 Chunk 단위로 다운로드된 자바스크립트 요소들이 렌더링 될 때는
먼저 받아진 document의 DOM 요소에자바스크립트 속성이 매칭되는 것이기 때문에
웹 페이지를 다시 그리는 과정은 일어나지가 않는다고 한다.

 

후 이번에 구글링을 통해 next 동작원리라고 검색해 보니 진짜 많은 양의 정보들이 나왔다.

 Next는 파헤치면 공부할수록 끝이 없는 것 같다. 개발 = 관에 들어갈 때까지 공부

그래도 저번 React와 비교했을 때 부족했던 부분이 많이 채워진 것 같지만 아직 나는 고프다..

 

Next 공식 문서 : https://nextjs.org/learn/foundations/how-nextjs-works/rendering

 

참고블로그:

https://narup.tistory.com/230

https://www.howdy-mj.me/next/hydrate