클라이언트 컴포넌트 -> 서버에 미리 작성된 상호작용 가능한 UI를 작성할 수 있게 해주고 브라우저에서 client JavaScript를 사용하게 해준다.
클라이언트 렌더링의 좋은 점
- Interactivity: 클라이언트 컴포넌트는 state, effect, event listener를 사용할 수 있다.
-> 유저에게 즉각적인 피드백을 줄 수 있고 UI를 업데이트할 수 있다. - Browser APIs: 클라이언트 컴포넌트는 브라우저 API들에 접근할 수 있다 (예를 들어 geolocation, localStorage)
클라이언트 컴포넌트 사용하기
클라이언트 컴포넌트를 사용하려면 리액트 파일의 맨 위에(imports 보다도 위에) "use client"를 직접적으로 추가한다.
"use client"는 서버와 클라이언트 컴포넌트 모듈 사이의 선을 선언해준다.
-> 파일에서 "use client"로 정의된다는 것은 child component들을 포함해 import된 모든 다른 모듈들이 client bundle의 부분으로 인식된다.
nested component에서 onClick과 useState를 사용하는데 "use client"를 직접적으로 선언하지 않으면 오류가 일어난다.
-> 앱 라우터의 모든 컴포넌트는 기본적으로 서버 컴포넌트이기 때문에 이러한 API들이 유효하지 않기 때문이다.
Defining multiple use client entry points
리액트 컴포넌트 트리의 엔트리 포인트에 multiple "use client"를 선언할 수 있다.
하지만 클라이언트에 렌더되기 위해 모든 컴포넌트에 "use client"를 선언할 필요는 없다. 바운더리에서 한 번 선언하면 바운더리로 import된 모든 자식 컴포넌트들과 모듈들이 클라이언트 번들의 부분으로 인식된다.
클라이언트 컴포넌트가 렌더링되는 방식
클라이언트 컴포넌트는 요청이 브라우저에 의한 full 페이지 로드(브라우저가 새로고침 될 때 일어나는 페이지 리로드 또는 애플리케이션에 첫 접속할 때)의 부분인지 아니면 subsequent(후속적인) navigation인지에 따라 다르게 렌더링된다.
Full page load
초기 페이지 로드를 최적화하려고 Next.js는 React API를 사용해서 클라이언트와 서버 컴포넌트 모두를 위한 정적 HTML 프리뷰를 렌더한다.
-> 유저가 애플리케이션에 처음 접속하면 클라이언트로 다운로드하는 걸 기다릴 필요 없이 페이지의 콘텐츠를 즉시 볼 수 있다 그리고 클라이언트 컴포넌트 자바스크립트 번들을 실행한다.
서버:
1. 리액트는 클라이언트 컴포넌트의 참조를 포함하는 React Server Component Payload(RSC Payload)라 불리는 특별한 데이터 포맷으로 서버 컴포넌트를 렌더한다.
2. Next.js는 서버의 라우트에 HTML을 렌더하기 위해 RSC Payload와 클라이언트 컴포넌트 자바스크립트 명령어를 사용한다.
클라이언트:
1. HTML은 라우트의 상호작용 없는 초기 프리뷰를 빠르게 즉시 보여주기 위해 사용된다.
2. 리액트 서버 컴포넌트 페이로드는 클라이언트와 서버 컴포넌트 트리들을 조정하고 DOM을 업데이트하기 위해 사용된다.
3. 자바스크립트 명령어는 클라이언트 컴포넌트를 hydrate하고 UI를 상호작용 가능하게 만들기 위해 사용된다.
Hydration이 뭔데?
하이드레이션은 정적인 HTML을 상호작용 가능하게 만들기 위해 이벤트 리스너를 DOM에 붙이는 과정이다.
Subsequent Navigation
클라이언트 컴포넌트는 서버-렌더 HTML 없이 클라이언트에 다 렌더링된다.
클라이언트 컴포넌트 자바스크립트 번들은 다운로드되고 파싱된다.
번들이 한 번 준비되면, 리액트는 클라이언트와 서버 컴포넌트 트리를 조정하고 DOM을 업데이트하기 위해 RSC Payload를 사용할 것이다.
서버 환경으로 되돌리기
"use client" 바운더리를 선언한 후에 서버 환경으로 되돌리고 싶을 때가 종종 있다.
- 클라이언트 번들 사이즈를 줄이거나 서버에 데이터를 패치하거나 서버에서만 사용가능한 API를 사용할 때
클라이언트와 서버 컴포넌트 그리고 서버 액션을 인터리브하여서 이론적으로 코드가 클라이언트 컴포넌트 안에 싸져 있어도 서버에 둘 수 있다.
