React 'use client'와 'use server'에 대해서 Canary

Next.js뿐 아니라, React 19에서 도입된 서버 Component와 Client Component를 구분하기 위한 지시어입니다.

서버 또는 클라이언트에서만 실행되어야 하는 걸 명시적으로 알릴 수 있기 때문에, 성능 최적화와 명확한 코드 구조를 달성할 수 있습니다.

(해당 기능은 2024년 03월 18일 기준 Canary지만, 2024년 5월부터 공식적으로 사용을 권장할 것으로 생각됩니다. React Conf 2024)

‘use server’

• Component가 서버에서만 실행되어야 합니다. 데이터 가져오기, SSR 처리 등 서버에서만 실행되어야 하는 코드에 사용됩니다.

• Server component는 Client로 전송되기 전 서버에서 렌더링되며, 클라이언트 사이드에서는 실행되지 않습니다. 따라서 서버 로직은 클라이언트에서 Import하게 될 경우, 문제를 발생시킵니다.

Next.js default ‘use server’

// app/components/UserProfile.server.jsx

export default function UserProfile({ userId }) {
  'use server'
  const userData = fetchUserData(userId);

  return (
    <div>
      <h1>{userData.name}</h1>
      <p>{userData.description}</p>
    </div>
  );
}

'use client';

export default function Counter() {
  const [count, setCount] = React.useState(0);

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