Next 14 (3) Hydrate

Hydration

서버로 부터 받아온 HTML위에 React applicaiton(js 코드)를 실행함
버튼에 이벤트를 추가한다던지 Link와 같은 상호작용 요소를 추가한다던지

특정 컴포넌트는 이러한 Hydrate과정이 필요하겠지만 이런 과정이 필요하지 않은 컴포넌트도 존재한다.

이런 경우엔 사용자가 모든 페이지의 JS파일을 다운받는 것이 아닌 상호작용 요소가 필요한 페이지에서만 js파일들을 다운 받게 해야 효율적이다.

' use client '

그럼 위와 같은 Hydrate 필요여부를 구분하는 방법이 바로 use client이다.
이를 통해 어떤 컴포넌트가 Hydrate가 필요한지 구분할 수 있고, 이를 통해 서버 컴포넌트, 클라이언트 컴포넌트가 분류된다.

'use client' 여부를 떠나 모든 컴포넌트는 SSR되어 HTML로 변환되지만 그 중 client component만이 hydrate과정을 거쳐 상호작용 요소를 가진 컴포넌트 역할을 수행하게 되는 것이다.