Next.js 공식 docs를 보고 작성한 내용입니다.

Next.js의 서버 컴포넌트에 이어 클라이언트 컴포넌트에 대해 알아보겠습니다.

Client Components

클라이언트 컴포넌트는 상호 작용이 가능한 UI가 요청 시간에 클라이언트에 렌더링 될 수 있게 합니다. Next.js에서 클라이언트 렌더링은 opt-in으로, React가 어떤 컴포넌트를 client에서 렌더링 해야 하는지 명시해 주어야 합니다.

클라이언트 렌더링의 장점

interactivity
클라이언트 컴포넌트들은 state, effect, event listeners들을 사용할 수 있습니다. 이는 즉, 그들이 유저에게 즉각적인 피드백을 받아 UI를 업데이트 할 수 있다는 것을 뜻합니다.
Browser APIs
클라이언트 컴포넌트들은 브라우저 API(geolocation, localStorage 등)에 접근이 가능합니다.

Next.js에서 클라이언트 컴포넌트 사용하기

클라이언트 컴포넌트를 사용하기 위해 React의 "use client"를 파일의 최상단에 추가합니다.
"use client"는 서버와 클라이언트 컴포넌트 모듈 간의 경계를 선언하기 위해 사용됩니다. 이는 파일에서 "use client"를 정의하여 모든 다른 모듈들이 클라이언트 번들의 일부분인 것처럼 여겨집니다.

'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>
  )
}

위 코드에서 onClick과 useState가 사용되고 있습니다. 만일 'use client'를 명시하지 않는다면 오류가 발생할 것입니다. 서버에서 렌더링 되는 컴포넌트들은 기본적으로 이러한 API를 지원하지 않기 때문입니다. 'use client'를 명시하여 React는 이런 API들이 사용 가능한 client에 렌더링 할 수 있습니다.

Defining multiple use client entry points:
'use client'를 모든 곳에서 명시하지 않아도 됩니다. 경계를 한번 정했다면, 모든 자식 컴포넌트와 모듈들은 클라이언트 번들의 일부분으로 여겨집니다.

클라이언트 컴포넌트가 렌더링 되는 법

Next.js에서 클라이언트 컴포넌트들은 요청이 전체 페이지 로드인지, 또는 연속적인 탐색인지에 따라 다르게 렌더링 됩니다.

Full Page load

초기 페이지 로드를 최적화 하기 위해 Next.js는 React의 API를 정적인 HTML 미리보기로 클라이언트 컴포넌트와 서버 컴포넌트 둘 다 제공합니다. 다시 말해 유저가 웹을 처음 방문하면 클라이언트가 자바스크립트 번들에 신경 쓸 필요 없이 바로 페이지의 내용들을 볼 수 있습니다.

서버 측에서,
1. React는 서버 컴포넌트를 React Server Component Payload (RSC Payload)라 불리는 특별한 데이터 형식으로 렌더링합니다. 여기에는 클라이언트 컴포넌트에 대한 참조도 포함됩니다.
2. Next.js는 RSC payload와 Client Component로 Javascript Instruction들이 서버의 HTML에 렌더링되도록 합니다.

클라이언트 측에서는,
1. HTML은 루트의 빠른 non-interactive한 미리보기를 즉시 보여줍니다. - 이것은 초기 페이지 로드에만 해당됩니다.
2. RSC Payload는 클라이언트와 서버 컴포넌트 트리를 재조정하고 DOM을 업데이트합니다.
3. JavaScript instructions들은 클라이언트 컴포넌트를 활성화시키고 애플리케이션이 상호작용하게 만듭니다.

Subsequent Navigations

subsequent navigations에서 클라이언트 컴포넌트들은 서버 렌더링 HTML 없이, 클라이언트에서 모두 렌더링됩니다. 이는 클라이언트 컴포넌트 자바 스크립트 번들이 다운로드되고 해석된다는 것을 의미합니다. 번들이 준비되면 리액트는 RSC payload를 client 와 server component 트리를 다시 만드는 데 사용하고 DOM을 업데이트합니다.

서버 환경으로 되돌아가서...

"use client" 를 선언하고 나서 서버 환경으로 되돌아가고 싶을 때가 있을 수 있습니다. 예를 들어, 클라이언트 번들 사이즈를 줄이고 서버에서 데이터를 페치하거나 서버에서만 사용되는 API를 사용할 때입니다.

Composition Pattern을 이용하면 이를 해결할 수 있습니다.