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’

Component가 클라이언트에서만 실행되어야 합니다. CSR만 작업 가능합니다.
(SSR, CSR에 대한 부분은 따로 내용을 정리하겠습니다.)
use client를 사용하게 될 경우, 브라우저에서 동적 렌더링되며, Server Side Rendering이 발생하지 않습니다.

default로 ‘use server’가 잡혀있기 때문에, client component의 경우에는 최상단에 반드시 ‘use client’를 작성해줘야 합니다. useState와 같은 Hooks를 사용하게 될 경우, Next.js가 client component로 인식해 Error를 발생시킵니다.

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

Future Engineering

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

‘use server’

Next.js default ‘use server’

‘use client’