[Next.js] Hydration와 use client

하이드레이션(hydration)이란?

서버에서 렌더링된 HTML을 클라이언트 측에서 React의 상태와 이벤트 핸들러와 결합하는 과정을 말하며, 이를 통해 페이지는 초기 로드 시 빠르게 표시되며, 이후 클라이언트 측에서 동적인 동작이 가능해진다.

 

동작 과정

아래의 과정을 통해 서버에서 렌더링된 HTML을 빠르게 클라이언트에 표시하면서, 클라이언트에서 React 애플리케이션의 상호작용을 활성화할 수 있다. 

서버 사이드 렌더링
────────────────────────────────────────────────────────────────────────
서버
1. React 애플리케이션 렌더링 -> HTML 생성 -> HTML 전달
────────────────────────────────────────────────────────────────────────
클라이언트 (User Client)
2. HTML 수신 -> React 애플리케이션 초기화 -> HTML과 초기화된 상태 비교
3. 필요한 업데이트 수행 -> 애플리케이션 준비 완료
────────────────────────────────────────────────────────────────────────

Hydration과 SSR(서버사이드 렌더링)의 차이

SSR은 HTML을 서버에서 미리 렌더링하여 클라이언트에 전달하는 것을 의미하고, Hydration은 클라이언트가 이 서버사이드 렌더링된 HTML을 받아 React 애플리케이션으로 만드는 과정을 의미한다.

 

• SSR: 서버에서 렌더링된 HTML을 생성하는 과정.
• Hydration: 클라이언트에서 서버사이드 렌더링된 HTML을 받아 React 애플리케이션으로 변환하는 과정.
•  

use client 설정

컴포넌트가 클라이언트에서 Hydration이 이루어질지, 아니면 서버에서 렌더링될지 명시할 수 있는 기능으로, use client 지시어를 사용하면 해당 컴포넌트가 클라이언트에서만 실행되도록 지정할 수 있다. 

즉 use client 지시어를 통해 선택된 컴포넌트들에 한해서만 React application이 실행되도록 설정할 수 있다는 것이고, 이를 통해 사용자들이 다운받아야하는 js 코드의 양을 줄일 수 있다. 반면 서버에서만 렌더링 되는 컴포넌트들에 대해서 API fatch가 있다면 코드가 client로 가지 않아 보안을 높일 수 없다.