[Next.js] App Router - Client Component

🌱 해당 포스트는 한 입 크기로 잘라먹는 Next.js(v15)을 수강하고, Next.js 공식 문서 - app router를 참고하여 정리한 글입니다.

Client Component

Client Component는 클릭 이벤트 등 사용자와 상호작용할 수 있는 컴포넌트다.
Client Component는 서버에서 미리 렌더링된 후 (사전 렌더링 과정), 클라이언트에서도 JS 코드를 실행시켜 상호작용할 수 있게 만든다.

클라이언트 렌더링의 장점

• 상호작용: Client Components는 상태, 효과 및 이벤트 리스너를 사용할 수 있으므로 사용자에게 즉각적인 피드백을 제공하고 UI를 업데이트할 수 있다.

• 브라우저 API: Client Components는 geolocation이나 localStorage
  와 같은 브라우저 API에 접근할 수 있다.

Client Component 사용하기

Next.js에서 Client Components를 사용하려면, 파일 상단에 "use client" 지시어를 import 위에 추가하면 된다.

// next.js 공식 문서 예시
'use client' // 이렇게 추가하면 된다.
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

여러 use client 진입점을 정의하는 경우:

React Component 트리에서 여러 "use client" 진입점을 정의할 수 있다. 하지만, 클라이언트에서 렌더링해야 하는 모든 컴포넌트에 "use client"를 정의할 필요는 없다.
한 번 경계를 정의하면 모든 자식 컴포넌트와 import된 모듈이 클라이언트 컴포넌트로 간주되기 때문이다.

Client Component 렌더링 방식

서버에서는 (사전 렌더링) :

1. React는 Server Components를 React Server Component Payload (RSC Payload)라는 특별한 데이터 형식으로 렌더링하며, 여기에는 Client Components에 대한 참조가 포함되어 있다.

2. Next.js는 RSC Payload와 Client Component JavaScript 코드를 사용하여 서버에서 경로에 대한 HTML을 렌더링한다.

그런 다음 클라이언트에서는:

1. 사전 렌더링 된 HTML을 사용하여 경로에 해당하는 페이지를 빠르게 보여준다. (상호작용 X)

2. React Server Components Payload를 사용하여 Client와 Server Component 트리를 조정하고 DOM을 업데이트합니다.

3. JavaScript 코드를 사용하여 Client Components를 Hydration하여, UI를 인터랙티브하게 만든다.

Hydration이란?
Hydration은 이벤트 리스너를 DOM에 연결하여 정적 HTML을 인터랙티브하게 만드는 과정입니다. 하이드레이션은 hydrateRoot React API를 사용하여 백그라운드에서 수행됩니다.

초기 접속 이후의 네이게이팅

초기 접속 시에만, 사전 렌더링된 페이지를 보여주고, 이후 경로 이동이 발생하는 경우 Client Components가 서버 렌더링된 HTML 없이 클라이언트에서 렌더링 된다.

경로 이동이 발생하면, Client Component JavaScript 번들이 다운로드한다. 번들이 준비되면 React는 RSC Payload를 사용하여, Client와 Server Component 트리를 조정하고 DOM을 업데이트한다.