React Server Components 도입 검토하며 느낀 점

배경

Next.js 13이 출시된 지 꽤 지났지만, app directory는 여전히 베타 상태다. 그래도 새 프로젝트 시작 전에 미리 경험해두면 좋을 것 같아 간단한 프로토타입을 만들어봤다.

Server Components의 핵심

기존 pages 디렉토리와 가장 큰 차이는 기본이 서버 컴포넌트라는 점이었다. 클라이언트에서 인터랙션이 필요한 부분만 'use client' 디렉티브로 명시해야 한다.

// app/page.jsx (Server Component)
export default async function Page() {
  const data = await fetch('https://api.example.com/data');
  return <List data={data} />;
}

// components/list.jsx (Client Component)
'use client'
export default function List({ data }) {
  const [selected, setSelected] = useState(null);
  return <div onClick={() => setSelected(data[0])}>{/* ... */}</div>;
}

좋았던 점

• 데이터 페칭이 직관적이다. useEffect나 getServerSideProps 없이 바로 async/await 사용 가능
• 번들 크기가 확실히 줄어든다. 서버 컴포넌트의 의존성은 클라이언트로 전송되지 않음
• 레이아웃 중첩이 자연스럽다

아직 이른 이유

• 생태계 라이브러리들이 아직 대응 중이다. 일부 UI 라이브러리에서 hydration 오류 발생
• 러닝 커브가 있다. 팀원들과 "어디까지가 서버이고 클라이언트인지" 합의가 필요
• 프로덕션 레퍼런스가 부족하다

결론

당장 실무에 적용하기보다는, 사이드 프로젝트로 더 경험을 쌓아두는 게 맞다고 판단했다. 2024년쯤 안정화되면 본격적으로 마이그레이션을 고려해볼 예정이다.