React Server Components 실험: Next.js 13 App Router 도입기

배경

회사 프로젝트는 아직 Next.js 12를 쓰고 있지만, 개인 프로젝트에서 Next.js 13 App Router를 시험해보기로 했다. RSC(React Server Components)가 실제로 어떻게 동작하는지 직접 경험해보고 싶었다.

주요 변경점

1. 파일 시스템 라우팅

기존 pages/ 디렉토리 대신 app/ 디렉토리를 사용한다. page.tsx, layout.tsx 같은 특수 파일명으로 구조를 정의한다.

// app/dashboard/page.tsx
export default async function DashboardPage() {
  const data = await fetch('https://api.example.com/data');
  return <div>{/* ... */}</div>;
}

2. 기본이 Server Component

모든 컴포넌트가 기본적으로 서버에서 렌더링된다. 클라이언트 인터렉션이 필요하면 명시적으로 'use client'를 선언해야 한다.

'use client'

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

3. 데이터 페칭 패턴 변화

getServerSideProps나 getStaticProps 대신 컴포넌트 내부에서 직접 async/await를 사용할 수 있다.

마주친 문제들

번들 사이즈 이슈: 처음엔 모든 컴포넌트에 'use client'를 붙였다가 번들이 불필요하게 커졌다. Server Component로 가능한 부분을 최대한 분리하니 개선됐다.

라이브러리 호환성: 일부 써드파티 라이브러리가 아직 RSC를 지원하지 않아 Client Component로 wrapping 해야 했다.

러닝 커브: 어떤 코드를 서버에서 실행하고 어떤 걸 클라이언트에서 실행할지 구분하는 게 처음엔 헷갈렸다.

소감

아직 안정화되지 않은 느낌이지만, 방향성은 좋다고 생각한다. 특히 SEO가 중요한 프로젝트나 초기 로딩 성능이 중요한 경우 장점이 명확했다. 다만 당장 회사 프로젝트에 도입하기엔 이르다는 판단이다. 몇 달 더 지켜보고 안정화되면 마이그레이션 계획을 세워볼 예정이다.