React Server Components 실험: 번들 사이즈 줄이기

배경

회사 대시보드 프로젝트가 점점 무거워지면서 초기 로딩 속도가 문제가 되었다. 번들 분석 결과 chart 라이브러리와 데이터 처리 로직이 큰 비중을 차지하고 있었다.

Next.js 13의 App Router와 Server Components를 실험적으로 도입해보기로 했다.

적용 과정

기존 페이지 컴포넌트를 Server Component로 전환하고, 인터랙션이 필요한 부분만 'use client'로 분리했다.

// app/dashboard/page.tsx (Server Component)
import { fetchAnalytics } from '@/lib/api';
import ChartClient from './ChartClient';

export default async function DashboardPage() {
  const data = await fetchAnalytics();
  
  return (
    <div>
      <h1>Dashboard</h1>
      <ChartClient data={data} />
    </div>
  );
}

// app/dashboard/ChartClient.tsx
'use client';
import { LineChart } from 'recharts';

export default function ChartClient({ data }) {
  return <LineChart data={data} />;
}

데이터 페칭을 서버에서 처리하고, 차트 라이브러리만 클라이언트로 보내는 구조다.

결과

• 클라이언트 번들: 450KB → 310KB (31% 감소)
• LCP: 2.8s → 2.1s
• 서버 메모리 사용량은 약간 증가

주의사항

1. Context API 사용 제약: Server Component에서는 Context를 사용할 수 없어서 상태 관리 구조를 재설계해야 했다.
2. 디버깅 어려움: 서버/클라이언트 경계에서 발생하는 에러가 명확하지 않았다.
3. 라이브러리 호환성: 일부 써드파티 라이브러리가 Server Component를 지원하지 않아 'use client' 래핑이 필요했다.

결론

Server Components는 번들 사이즈 최적화에 확실히 효과적이었다. 하지만 아직 생태계가 성숙하지 않아서 프로덕션 전환은 신중히 판단해야 할 것 같다. 당분간은 새로운 기능에만 제한적으로 적용할 예정이다.