[ Next.js14 ] 03.Hydration, "use client"

SSR인데 CSR처럼 새로고침없이도 페이지 이동이 가능한 이유는 왜그런걸까?

이유는 바로 hydration 이다. 이건 뭘까?

우선, next.js의 서버/클라이언트 컴포넌트들은 무조건 서버사이드렌더링으로 pre-render되어 브라우저에 초기 HTML을 전달한다. 이로써 사용자는 빠르게 화면을 볼 수 있다.

그런데 사용자가 네비게이션을 클릭하여 페이지 이동을 하려한다. 이 때 새로고침 없이 이동되는데 이유는 무엇일까?

바로 "use client"를 가진 컴포넌트는 브라우저에서 상호작용이 가능한 UI(=interactive UI)로써 load(=초기화)되어 유저의 이벤트를 리슨하는것이 가능해져 새로고침 없이 이동이 가능하게 되는것이다. 이를 hydration이라 한다.

(만약 데이터가 느리다면? 새로고침이 되면서 이동되며 ssr로 미리 렌더된 초기 화면을 볼 수 있음 하지만 데이터가 다시 빨라지면? 새로고침없이 csr로 작동되며 이동할 수 있음!)

Hydration의 과정

1. pre-render된 초기 HTML이 브라우저에 전달
2. 즉시 react와 javascript 등 모든것을 load
3. "use client"를 가진 컴포넌트는 interactive를 가지게됨

SSR과 CSR의 연결과정이라고도 이해할 수 있다.

즉,hydration은 pre-render된 단순 HTML을 React applicaation(사용자와 상호작용할 수 있는 앱)으로 초기화하는 작업

클라이언트 컴포넌트와 서버 컴포넌트 규칙

1. 클라이언트 컴포넌트는 use client 지시어를 가진다.
2. csr에서 hydration이 될 컴포넌트는 오직 use client를 가진 컴포넌트
3. 클라이언트 컴포넌트 안에 서버컴포넌트를 가질 수 없음. 왜냐? 종속되어 다 클라이언트 컴포넌트로 적요됨
4. 서버컴포넌트 안에 클라이언트 컴포넌트는 가질 수 있다.

느낀점과 알게된 이점들

마치 컴포넌트에게도 미리 타입을 정해주어 자바스크립드 다운로드 최적화 (?) 느낌이다.
사용자들이 다운받아야하는 자바스크립트 코드가 줄어든다는 이점이 있기때문이다.
서버컴포넌트에서는 서버에서만 통신하고 브라우저(클라이언트)로는 절대 가지 않기때문에 보안을 신경쓰지 않아도되는 이점이있음 원하는 api키를 넣거나 db통신을 해도 된다는 이점도 있다.