[Next.js] Next.js의 Hydrate 이란? (feat: SSR , CSR)

리액트로 개발을하다보면 , SPA는 클라이언트 사이드 렌더링이기때문에 , SEO가 안좋고 초기로딩속도가 느리다는 것은 한번쯤은 들어봤을텐데요,
 
클라이언트사이트의 단점들을 보완하고자 서버상드 렌더링 프레임워크인 Next.js를 공부 하게 되었는데, Next.js의 Hydrate을 알아보려고 합니다.
 
 

Client side rendering,

CSR에서는 초기 페이지 요청 시 서버에서 빈 HTML 페이지를 받아오고, 이후 JavaScript 코드를 사용하여 클라이언트에서 데이터를 가져와서 페이지를 동적으로 생성합니다. 사용자가 페이지를 이동하거나 상호작용할 때마다 필요한 데이터를 서버로부터 가져오고, 페이지를 갱신하게 됩니다. 이러한 접근 방식은 최초 로딩 속도는 느릴 수 있으나, 이후에는 빠른 페이지 전환과 보다 부드러운 사용자 경험을 제공할 수 있습니다
 

Server side rendering

Next.js는 클라이언트에게 웹 페이지를 보내기 전에 Server Side 단에서 미리 웹 페이지를 Pre-Rendering 합니다.
SSR에서는 초기 페이지 요청 시 서버에서 미리 해당 페이지를 렌더링하여 완성된 HTML 페이지를 클라이언트에게 전달합니다.
이로 인해 클라이언트는 빈 페이지가 아니라 완성된 페이지를 받아오기 때문에 초기 로딩 속도가 빠르고, 검색 엔진 최적화(SEO)에 유리합니다. 사용자가 페이지를 요청할 때마다 서버에서 새로운 HTML 페이지를 생성하여 보여주게 되므로, 페이지의 동적인 내용이 항상 최신 상태로 유지됩니다. Next.js는 SSR을 쉽게 구현할 수 있도록 도와주는 프레임워크로, 페이지 기반의 서버 사이드 렌더링을 지원합니다. 이를 통해 React 기반의 웹 애플리케이션에서 SEO, 초기 로딩 성능을 보완 할 수 있습니다.
 

Hydrate

그렇다면 Hydrate는 Next.js에서 무엇을 뜻할까?
 
처음에 Next.js 가 렌더링이 될때 클라이언트는 단순한 HTML만 보일 것이고 , 자바스크립트는 적용이 하나도 안된 상태입니다.
즉 화면은 클리이언트에게 보여주고있지만 , JS 모듈 , 클릭이벤트 그리고 이벤트 리스너 같은 (JS Stuff)가 DOM요소에 적용이 안되어 있습니다.
 
그렇다면 단순한 HTML 을 어떻게 정상적으로 작동 하는것일까?
 
Next.js Server에서는 Pre-Rendering된 웹 페이지를 클라이언트에게 보내고 나서, 바로 리액트가 번들링 된 자바스크립트 코드들을 클라이언트에게 전송한다.
 
아래 네트워크 패널은 저의 Next.js 13으로 만든 웹 페이지 입니다.
새로고침을 하면 제일 첫번째 응답으로 document type을 받아오고 이후에 리액트 코드들이 하나씩 응답이 오는것을 볼 수 있습니다.
 
그리고 이 자바스크립트 코드들이 이전에 보내진 HTML DOM 요소 위에서 한번 더 렌더링을 하면서, 각자 자기 자리를 찾아가며 매칭이 된다.

이러한 과정을 Hydrate 라고 합니다 .

자바스크립트 코드들이 DOM 요소 위에 물을 채우 듯 필요로 하던 요소들을 채운다 하여 Hydrate(수화)라는 용어를 쓴다고 합니다.

 

Hydrate의 뜻을 대강 알았으니 ,
그럼 서버사이드 단에서 렌더링을 한번 하고 , 클라이언트 단에서 렌더링을 해서 hydrate를 한다?
그럼 효율이 그닥 좋지 않을까? 라는 생각이 들 수 있을것같습니다.
 

 
사실 SSR은 이러한 비효율성을 보완하고 많은 이점을 가져올 수 있습니다.
 
빠른 Pre-Rendering: SSR은 서버 단에서 빠르게 페이지를 사전 렌더링하여 클라이언트에게 빠른 응답을 제공합니다. 초기 페이지 요청에 대해 서버에서 완성된 HTML 페이지를 제공하기 때문에 사용자는 빈 페이지가 아니라 이미 렌더링된 페이지를 보게 됩니다. 가벼운 상태의 Pre-Rendered Document: Pre-Rendering된 문서는 자바스크립트 요소가 포함되지 않은 가벼운 상태이므로 클라이언트에게 빠른 로딩을 가능하게 합니다. 이후 클라이언트가 페이지를 로드할 때 필요한 자바스크립트를 가져와서 상호작용성을 추가합니다.

클라이언트 렌더링 최적화: 클라이언트 단에서 자바스크립트가 렌더링을 할 때, 전체적인 웹 페이지를 다시 그리는 과정이 필요하지 않습니다.  단순히 각 DOM 요소에 자바스크립트 속성을 매칭시키기 위한 목적으로 사용되므로 Paint 함수 호출이 발생하지 않습니다.
이러한 방식으로 SSR은 초기 로딩 속도를 높이고 SEO를 개선하면서도 클라이언트 단에서 필요한 자바스크립트를 활용하여 인터랙티브한 웹 애플리케이션을 구현하는 데에 큰 이점을 제공합니다. 이로 인해 사용자는 더 빠른 웹 경험을 누릴 수 있습니다.
 

hydrate() & render()

hydrate는 리액트의 함수 입니다.
아마도 리액트 프로젝트를 하면 render() 함수는 한번씩 꼭 봤을건데요, 두개의 차이점을 간단하게 보겠습니다.
 

render()

ReactDOM.render(element, container[, callback])

 클라이언트 사이드 렌더링(Client-Side Rendering, CSR)에서 사용됩니다. 첫 번째 렌더링 시점에 사용됩니다. 가상 DOM과 실제 DOM 사이의 비교 없이, 전달받은 React 엘리먼트를 지정된 컨테이너에 렌더링합니다. 기존에 렌더링되어 있던 컨테이너 내용은 완전히 대체됩니다.
 

hydrate() 

ReactDOM.hydrate(element, container[, callback])

서버 사이드 렌더링(Server-Side Rendering, SSR) 이후에 클라이언트에서 사용됩니다.
SSR로 렌더링된 HTML을 클라이언트에서 가져와서, 기존에 이미 렌더링되어 있는 컨테이너와 비교하여 업데이트합니다. SSR로 렌더링된 HTML에 이벤트 핸들러와 상태를 유지하여, 클라이언트와 서버의 상태가 일치하도록 합니다. 첫 번째 렌더링 이후에 사용되며, React 컴포넌트의 이벤트 핸들러와 상태를 활성화하는 데에 사용됩니다.
 
일반적으로, 서버 사이드 렌더링된 페이지에서는 첫 번째 렌더링 시점에 hydrate()를 사용하여 클라이언트와 서버 사이의 상태 일치를 유지합니다. 이후에는 클라이언트 단에서 render()를 사용하여 필요한 업데이트를 처리합니다.

hydrate의 개념을 알고나서 Next.js의 서버사이드렌더링 개념을 좀 더 보충 할 수 있었습니다.

Reference
https://helloinyong.tistory.com/315

Next.js의 Hydrate란?

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

Next.js의 렌더링 과정(Hydrate) 알아보기