9.3.1 Client Rendering이란?

Client Rendering은 클라이언트에서 렌더링이 이뤄지는 것을 의미합니다. 쉽게 말해서, 우리가 사용하는 웹브라우저에서 렌더링 작업이 이뤄지는 것이라고 이해하면 됩니다. 그리고 클라이언트 컴포넌트가 사용하는 렌더링 방식이 바로 클라이언트 렌더링이라고 이해하면 됩니다.

클라이언트 컴포넌트를 사용하면 서버 컴포넌트에서는 사용할 수 없는 state, effects, 그리고 이벤트 리스너 등 사용자와의 상호작용을 제공할 수 있습니다. 또한 클라이언트 컴포넌트에서는 지리적인 위치(geolocation)나 로컬 스토리지(localStorage)와 같은 브라우저 API에 접근할 수도 있습니다.

9.3.2 Client Components 사용 방법

클라이언트 컴포넌트를 사용하려면 파일의 맨 위에 리액트의 'use client' 지시어를 추가하면 됩니다. 'use client'는 서버 컴포넌트와 클라이언트 컴포넌트 모듈 사이의 경계를 선언하는 데 사용됩니다. 즉, 파일에 'use client'를 정의하면, 해당 파일에서 가져오는 모든 모듈(하위 컴포넌트 포함)이 클라이언트 번들의 일부로 간주됩니다.

아래 코드는 버튼 클릭 횟수를 카운트하는 아주 간단한 형태의 클라이언트 컴포넌트 예시 코드입니다.

'use client';

import { useState } from 'react';

function Counter() {
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>{count} 번 클릭</p>
            <button onClick={() => setCount(count + 1)}>클릭</button>
        </div>
    );
}

export default Counter;

그렇다면 만약 'use client' 지시어를 사용하지 않고 클라이언트 컴포넌트에서만 사용 가능한 기능을 사용하면 어떻게 될까요? 아래 그림의 왼쪽 부분은 Counter라는 컴포넌트에서 'use client' 지시어 없이 onClick과 useState()를 사용하는 경우 오류가 발생하는 것을 나타낸 것입니다.

App Router의 모든 컴포넌트는 기본적으로 서버 컴포넌트이며, 서버 컴포넌트에서는 onClick과 useState() 등의 API를 사용할 수 없습니다. 그렇기 때문에 위 그림의 오른쪽 부분과 같이 Counter 컴포넌트에 'use client' 지시어을 사용함으로써 클라이언트 경계를 설정하고, Counter 컴포넌트 및 하위 모듈들이 클라이언트에서 작동해야 한다는 것을 React에게 알려줘야 합니다.

NOTE. 여러 'use client' 진입점 정의하기
React 컴포넌트 트리에서 여러 개의 'use client' 진입점을 정의할 수 있습니다. 이를 통해 애플리케이션을 여러 클라이언트 번들로 분할할 수 있습니다.
그러나 클라이언트에서 렌더링해야 하는 모든 컴포넌트에 'use client'를 정의할 필요는 없습니다. 경계를 정의하면 해당 경계 내에서 가져오는 모든 하위 컴포넌트와 모듈은 클라이언트 번들의 일부로 간주되기 때문에, 가장 상단에 위치한 컴포넌트에만 경계를 정의해도 되는 것입니다.

9.3.3 Next.js에서의 Client Components 렌더링

Next.js에서 클라이언트 컴포넌트는 요청이 전체 페이지 로드의 일부인지(애플리케이션의 초기 방문 또는 브라우저 새로 고침으로 트리거되는 페이지 재로딩) 또는 후속 탐색의 일부인지에 따라 아래와 같이 다르게 렌더링됩니다.

Full Page Load (전체 페이지 로드)

초기 페이지 로드를 최적화하기 위해 Next.js는 React의 API를 사용하여 클라이언트 및 서버 컴포넌트 모두에 대해 서버에서 정적 HTML 미리보기를 렌더링합니다. 즉, 사용자가 애플리케이션을 처음 방문하면 클라이언트가 클라이언트 컴포넌트 자바스크립트 번들을 다운로드, 파싱 및 실행할 때까지 기다릴 필요 없이 페이지의 콘텐츠를 즉시 볼 수 있습니다.

이후 서버에서는 React가 서버 컴포넌트를 클라이언트 컴포넌트에 대한 참조를 포함하는 RSC Payload라는 특수 데이터 포맷으로 렌더링합니다. 그리고 Next.js는 RSC Payload와 클라이언트 컴포넌트 자바스크립트 명령어를 사용하여 서버에서 해당 Route에 대한 HTML을 렌더링합니다.

다음으로 클라이언트에서는 서버로부터 받은 RSC Payload를 사용하여 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트합니다. 그리고 자바스크립트 명령어는 클라이언트 컴포넌트를 Hydration하고 UI를 인터랙티브하게 만드는 데 사용됩니다.

Subsequent Navigations (후속 탐색)

초기 페이지 로드 이후에 다른 페이지를 탐색할 경우, 클라이언트 컴포넌트는 서버에서 렌더링되는 HTML 없이 전적으로 클라이언트에서 렌더링됩니다. 즉, 클라이언트 컴포넌트 자바스크립트 번들이 다운로드되고 파싱됩니다. 번들이 준비되면 React는 RSC Payload를 사용하여 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트합니다.