[08] Hydration 이 뭔가요?

[hyeyoonS]

📎 질문

Hydration 이 뭔가요?

✏ 구술 답변 키워드

1. 하이드레이션의 핵심 개념:
2. Next.js(SSR)와 하이드레이션의 관계
3. Hydration의 장점
4. Hydration 과정
   1. SSG, SSR을 실행한 HTML 결과물을 받아온다.
   2. ReactDOM.hydrate()가 작동하여 돔트리를 서로 비교한다.
   3. 페이지에 필요한 자바스크립트 코드와 연결하여 인터랙티브하게 만든다.

✏ 서술 답변

Hydration이란?

Hydration 뜻

‘수분 공급’이라는 의미로, 사전 렌더링 과정처럼 ‘건조하고 간단한’ html 파일에서 javascript(react)로 인터랙션 처리를 할 수 없어, ‘물’을 주어 인터랙티브하게 만들어준다는 의미.

Hydration이란 리액트에서 SSR, SSG을 실행하여 HTML 결과물을 받아온 뒤, ReactDOM.hydrate 함수를 활용하여 브라우저에서 리액트 트리에 맞게 파싱하는 행위.

간략하게 보면

1. 렌더링 한 결과물이 어떤 컴포넌트인지 확인하고,
2. 컴포넌트에 걸린 이벤트 리스너를 실제 DOM에 걸어주는 동작을 한다.

Next.js에서의 하이드레이션

• Next.js는 기본적으로 모든 페이지를 프리렌더링(pre-rendering)한다.
• 프리 렌더링 된 페이지를 클라이언트에 보낸다
• 이후 바로 브라우저는 전달받은 HTML을 화면에 띄우고(파싱, 트리 형성), 서버는 번들링된 자바스크립트 코드들을 클라이언트에게 전송한다.
  • 렌더링 된 js 파일들이 Chunk 단위로 다운로드된다.
  • ➡️ 이 시점부터 사용자는 UI를 볼 수 있다(TTV)
• 이 자바스크립트 코드들이 이전에 보내진 HTML DOM 요소 위에서 한 번 더 렌더링을 하면서 각자 자기 자리를 찾아가며 매칭이 된다.
  • ➡️ 이 단계가 완료되면 유저 인터랙션이 가능해진다(TTI)
• Next.js는 초기 로딩 성능을 유지하면서도 필요에 따라 리치한 인터랙티브 경험을 제공할 수 있다. 모던 웹 애플리케이션의 성능과 사용자 경험을 개선하는 핵심 기술 중 하나임.

Hydration의 장점

퍼포먼스 최적화: 사용자는 서버에서 렌더링된 HTML을 통해 즉시 컨텐츠를 볼 수 있으며, JS는 비동기적으로 로등되어 처리된다. 로드 타임을 개선함. SEO 개선: 서버에서 렌더링된 HTML은 검색 엔진이 쉽게 크롤링할 수 있어 SEO에 유리함 사용자 경험 향상: 초기 컨텐츠 로딩이 빠르고, 동적 인터렉션은 페이지가 완전히 로드된 후 활성화되므로 사용자 경험이 향상됨.

ReactDOM.hydrate가 하는 일

1. 서버에서 받아온 DOM tree와 react render 트리를 비교한다.
   1. HTML과 렌더링 된 트리가 아닌 버츄얼 돔과 비교한다. (훅을 사용한다면 useEffect가 실행되기 전의 상태와 비교)
2. 두 트리 사이의 diff를 얻어낸 뒤, 자체적으로 렌더링한 tree에 비교하면서 어떤 DOM이 어떻게 매칭되는지 이해한다.
   1. 텍스트라 속성값은 비교하지 않고, 렌더링된 엘리먼트 타입(태그)와 순서만 비교
3. 이해한 내용에 따라 CSR 동작을 실행한다.

참고자료

https://helloinyong.tistory.com/315 https://fourwingsy.medium.com/next-js-hydration-스타일-이슈-피해가기-988ce0d939e7(https://fourwingsy.medium.com/next-js-hydration-%EC%8A%A4%ED%83%80%EC%9D%BC-%EC%9D%B4%EC%8A%88-%ED%94%BC%ED%95%B4%EA%B0%80%EA%B8%B0-988ce0d939e7)

[hyeyoonS]

Hydration을 말하기에 앞서, Next.js에서 SSR의 실행 과정을 살펴볼 필요가 있습니다.

먼저 프론트 서버단에서 필요한 데이터를 백엔드 서버에 요청해 가져온 후, 받은 데이터를 활용해 프론트 서버에서 HTML을 렌더링합니다. 이후 프론트 서버에서 요청한 페이지에 필요한 HTML, CSS, JavaScript 코드를 브라우저에게 보내고, 사용자는 인터랙션 할 수 없는 HTML, CSS 코드로 그려진 화면을 보게 됩니다. 이 다음에 리액트 hydrate 과정을 거치면 비로소 사용자는 인터렉션이 가능해집니다.

hydration

hydration은 서버에서 렌더링된 HTML에 기반하여 클라이언트 측에서 JavaScript 이벤트와 상태를 연결하는 과정을 말합니다. hydration이 없다면 서버측에서 렌더링된 HTML을 무시하고 클라이언트 측에서 새로 렌더링이 필요한데, hydration을 통해 이러한 과정을 효율적으로 처리하게 됩니다.

Next.js는 리액트의 hydrate를 사용하는데, 리액트는 hydrate 할 때 렌더링된 콘텐츠가 서버와 클라이언트 간에 동일한 것으로 예상합니다. 이 때 Next.js에서 SSG 또는 SSR로 서버측에서 렌더링된 리액트 트리와 브라우저에서 처음 렌더링한 리액트 트리가 다른 경우에 hydration 에러가 발생하는 것입니다.

[olseul]

우선 Hydration라는 단어의 뜻은 수분공급 입니다. 왜 이런 용어를 사용할까요?

Server Side Rendering은 한가지 문제가 있는데, HTML을 그려줄 수는 있어도 실제로 브라우저가 렌더링 한 것이 아니기 때문에 Javascript의 코드를 DOMElement와 매칭시켜서 동적인 페이지를 구현하지는 못한다는 것입니다. 그래서 SSR로 인해 렌더링 된 HTML 페이지는 뼈대만 존재하는 바싹 마른 형태로 존재하게 되는데 이렇게 건조한 웹 페이지에 수분 공급을 해주어 정적인 페이지를 동적인 페이지로 변환 할 필요가 있습니다. 이 작업을 Hydration이라고 합니다.

[HaydenDevK]

• Hydration은 수분 공급이라는 의미로, 정적인 페이지에 생기를 불어넣어 동적으로 작동하게 한다는 의미이다.
• ReactDOM의 메서드이다. (ReactDOM.hydrate())
• 서버에서 렌더링 된 상태의 정적 HTML과 JS 파일을 보내주면 그 두 가지를 서로 매칭시켜서 자바스크립트가 동작할 수 있게 하는 과정이다.

[Jyophie]

Hydration

SSR 또는 SSG와 같은 렌더링 기법에서 사용되는 프로세스. 서버에서 HTML을 미리 생성하고 클라이언트 측에서 JS와 연결하는 작업을 의미한다. Hydration은 초기 렌더링 이후 동적인 사용자 인터렉션을 가능하게 하는 중요한 단계이다.

Hydration의 장점

• 퍼포먼스 최적화: 사용자는 서버에서 렌더링된 HTML을 통해 즉시 컨텐츠를 볼 수 있으며, JS는 비동기적으로 로등되어 처리된다. 로드 타임을 개선함.
• SEO 개선: 서버에서 렌더링된 HTML은 검색 엔진이 쉽게 크롤링할 수 있어 SEO에 유리함
• 사용자 경험 향상: 초기 컨텐츠 로딩이 빠르고, 동적 인터렉션은 페이지가 완전히 로드된 후 활성화되므로 사용자 경험이 향상됨.

Next.js에서의 Hydration

Next.js에서는 하이드레이션 프로세스가 자동으로 처리된다. SSR이나 SSG로 페이지를 렌더링하고 클라이언트 측에서 페이지를 hydrate하여 완전한 인터랙티브 앱으로 전환된다. 이러한 방식으로 Next.js는 초기 로딩 성능을 유지하면서도 필요에 따라 리치한 인터랙티브 경험을 제공할 수 있다. 모던 웹 애플리케이션의 성능과 사용자 경험을 개선하는 핵심 기술 중 하나임.

[wise-Ag]

Hydration이란 수분을 보충한다는 뜻으로 서버에서 렌더링 된 html에 자바스크립트의 이벤트와 상태를 보충한다는 뜻입니다. SSR은 서버에서 렌더링된 html과 번들링된 자바스크립를 받아 브라우저에서 연결하는 과정인 hydration이 필요합니다. Hydration으로 사용자는 빠르게 렌더링된 html을 화면을 볼 수 있으며 자바스크립트 이벤트와 상태 관리를 통해 동적인 상호작용을 할 수 있습니다.

[kanglocal]

• 서버에서 렌더링된 HTML을 클라이언트에서 받아서, 이벤트와 상태를 연결하는 과정을 말한다.
• 이 과정은 React의 앱으로 변환하는 프로세스이며, React의 가상 DOM에 매핑하는 것을 의미한다.
• CSR의 경우, 브라우저에서 React앱이 JavaScript로 실행되어 가상DOM을 생성 후 실제 DOM에 적용에 화면에 렌더링하지만, SSR은 초기 페이지로드 시 서버에서 생성된 정적 HTML이 브라우저로 전송된다. 따라서 이후에도 리액트 앱처럼 동작하게 하려면 hydration 과정이 필요하게된다.