React Server Components 도입 검토 후기

배경

Next.js 13이 출시되면서 App Router와 함께 React Server Components(RSC)가 정식 기능으로 제공되기 시작했다. 팀에서 새 프로젝트를 시작하면서 도입 여부를 검토했다.

장점

번들 사이즈 감소 효과가 확실했다. 서버에서만 실행되는 컴포넌트는 클라이언트 번들에 포함되지 않아 초기 로딩 속도가 개선됐다.

// Server Component (기본)
async function UserList() {
  const users = await db.users.findMany();
  return <div>{users.map(u => <UserCard key={u.id} user={u} />)}</div>;
}

// Client Component (명시 필요)
'use client';
function InteractiveButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

문제점

실제 적용해보니 러닝 커브가 생각보다 가팔랐다. 어떤 컴포넌트를 서버/클라이언트로 나눌지 판단하는 기준이 명확하지 않았고, 'use client' 디렉티브 위치에 따라 예상치 못한 에러가 발생했다.

기존 라이브러리들도 대부분 RSC를 고려하지 않고 만들어져서 호환성 문제가 있었다. Context API를 사용하는 라이브러리는 전부 클라이언트 컴포넌트로 래핑해야 했다.

결론

당장은 Pages Router를 유지하기로 했다. RSC 자체는 좋은 방향이지만 생태계가 따라오려면 시간이 더 필요해 보인다. 6개월 후 다시 검토할 예정이다.