[next 14 공식문서 부시기] 4.2 Client Components

Client Components

Client Components를 사용하면 요청 시 클라이언트에 렌더링할 수 있는 상호작용이 가능한 UI를 작성할 수 있습니다. Next.js에서 클라이언트 렌더링은 선택사항입니다. 즉, React가 클라이언트에서 렌더링해야 하는 Components 를 명시적으로 결정("use Client" 지시문 사용)해야 합니다.

장점

Client Components는 상태(state), 효과(effect) 및 이벤트 리스너(event listeners)를 사용할 수 있습니다. 즉, 사용자에게 즉각적인 피드백을 제공하고 상호작용을통해 UI를 업데이트할 수 있습니다.

사용

Client Components 를 사용하려면 파일 상단, import 문 위에 React "use client" 지시어를 추가하면 됩니다.

지시어를 사용함으로써 Server Components 와 Client Components 를 구분하는데 사용합니다. 즉, 파일에 "use client" 을 정의하면 child components 를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주됩니다.

만약 Server Components 안의 한 컴포넌트에서 onClick 와 useState 같은 클라이언트에서 활용하는 기능들을 바로 사용하는 경우 오류가 발생합니다. "use client" 지시어를 사용해 위와 같은 기능들을 활용하고 하위 내용들을 랜더링할 수 있습니다.

Client Components 랜더링 방식

Next.js에서 클라이언트 구성 요소는 요청이 전체 페이지 로드(애플리케이션에 대한 초기 방문 또는 브라우저 새로 고침에 의해 트리거된 페이지 다시 로드)의 일부인지 또는 후속 탐색(subsequent navigation)의 일부인지에 따라 다르게 렌더링됩니다.

전체페이지 로드 | Full page load

Next.js는 초기 페이지 로드를 최적화하기 위해 React의 API 를 사용하여 Client Components 와 Server Components 모두에 대해 서버에서 정적 HTML 미리 보기를 렌더링합니다. 즉, 사용자가 애플리케이션을 처음 방문하면 클라이언트가 Client Components 에 관련된 JavaScript 번들을 다운로드하고 구문 분석(parse)하고 실행할 때까지 기다릴 필요 없이 즉시 페이지의 콘텐츠를 볼 수 있습니다.

주요 키워드

• 초기 페이지 로드 최적화
• Client Components 와 Server Components 모두 서버에서 정적 HTML 미리 보기를 렌더링
• Client Components 의 JavaScript 번들 다운로드, 구문 분석(parse), 실행

서버에서 처리되는 과정

1. React는 Client Components 대한 참조를 포함하는 RSC 페이로드(React Server Component Payload)라는 특수 데이터 형식으로 Server Components를 렌더링합니다.
2. Next.js는 RSC 페이로드 및 Client Components JavaScript 명령어들을 사용하여 서버의 경로에 대한 HTML을 렌더링합니다

클라이언트에서 처리되는 과정

1. HTML은 경로의 빠른 비대화형(non-interactive)초기 미리보기를 즉시 표시하는 데 사용됩니다.
2. RSC 페이로드(React Server Component Payload)는 Client Components 와 Server Components 트리를 조정하고 DOM 을 업데이트하는 데 사용됩니다.
3. JavaScript 명령어는 Client Components를 하이드레이션하고 해당 UI를 대화형(interactive)으로 만드는 데 사용됩니다.

후속 탐색 | Subsequent Navigations

후속 탐색 시 Client Components는 서버에서 렌더링된 HTML 없이 클라이언트에서 완전히 렌더링됩니다. 이는 Client Components JavaScript 번들이 다운로드되고 parse 되는 것을 의미합니다. 번들이 준비되면 React는 RSC 페이로드를 사용하여 클라이언트 및 서버 구성 요소 트리를 조정하고 DOM을 업데이트합니다.