Next.js 'use client' 꼭 써야만 하는 3가지 결정적 순간

"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>
  );
}

두 번째 외부 라이브러리를 사용할 때
#

우리가 사용하는 수많은 서드파티 라이브러리 중에는 아직 RSC를 완벽하게 지원하지 않는 경우가 많거든요.

이럴 때는 우리가 직접 'use client' 경계선을 만들어주는 래퍼(wrapper) 컴포넌트를 만들어야 합니다.

라이브러리 컴포넌트를 감싸는 컴포넌트를 만들고 'use client'를 선언해서 re-export 하거나, 아니면 라이브러리를 사용하는 컴포넌트 자체에 'use client'를 명시해주는 방식인데요.

어떤 방식이든 반드시 클라이언트 경계를 설정해 주어야 합니다.

// 방법 1: 라이브러리 컴포넌트를 re-export하는 래퍼
"use client";

import { Accordion } from "third-party-library";

export default Accordion;

// 방법 2: 라이브러리를 사용하는 컴포넌트에 직접 선언
"use client";

import { Accordion } from "third-party-library";

export function SideBar() {
  return (
    <div>
      <Accordion>{/* ... */}</Accordion>
    </div>
  );
}

세 번째 RSC 페이로드 전송량을 줄여야 할 때
#

세 번째는 조금 더 전략적인 판단이 필요한 경우인데요.

바로 ‘RSC 페이로드(Payload)‘의 전송량을 줄여 성능을 최적화해야 할 때입니다.

클라이언트 컴포넌트가 많아지면 자바스크립트 번들 사이즈가 커지고, 반대로 서버 컴포넌트가 많아지면 서버에서 클라이언트로 전송되는 RSC 페이로드의 크기가 커지거든요.

이 둘은 서로 트레이드오프 관계에 있습니다.

여기서 중요한 점은, 자바스크립트 번들은 처음에 단 한 번만 로드되지만, RSC 페이로드는 서버 컴포넌트가 렌더링될 때마다 ‘매번’ 전송된다는 건데요.

따라서 자주 렌더링되는 컴포넌트의 HTML 구조가 매우 복잡하다면, RSC 페이로드 크기가 부담스러워질 수 있습니다.

예를 들어, 아래처럼 수많은 ‘테일윈드(tailwind)’ 클래스가 적용된 컴포넌트가 있다고 가정해 보겠습니다.

export async function Product() {
  const product = await fetchProduct();

  return (
    <div class="... /* 엄청나게 많은 tailwind 클래스 */">
      <div class="... /* 엄청나게 많은 tailwind 클래스 */">
        <div class="... /* 엄청나게 많은 tailwind 클래스 */">
          <div class="... /* 엄청나게 많은 tailwind 클래스 */">
            {/* product 데이터 사용 */}
          </div>
        </div>
      </div>
    </div>
  );
}

이런 경우, 데이터 페칭은 서버 컴포넌트에서 하되, 복잡한 UI 렌더링 부분만 클라이언트 컴포넌트로 분리하면 RSC 페이로드의 크기를 획기적으로 줄일 수 있습니다.

// 데이터 페칭은 서버 컴포넌트에서 담당
export async function Product() {
  const product = await fetchProduct();

  return <ProductPresentaional product={product} />;
}

// UI 렌더링은 클라이언트 컴포넌트에 위임
"use client";

export function ProductPresentaional({ product }: { product: Product }) {
  return (
    <div class="... /* 엄청나게 많은 tailwind 클래스 */">
      {/* ... */}
    </div>
  );
}