React Server Components 이해하기

React Server Components(RSC)는 React의 새로운 패러다임입니다.

서버 컴포넌트란?

서버 컴포넌트는 서버에서만 렌더링되는 컴포넌트입니다. 클라이언트로 JavaScript를 전송하지 않아 번들 크기를 줄일 수 있습니다.

장점

1. 번들 크기 감소 - 서버에서만 실행되는 코드는 클라이언트로 전송되지 않습니다
2. 직접 데이터 접근 - 데이터베이스나 파일 시스템에 직접 접근 가능
3. 보안 향상 - API 키나 민감한 정보를 서버에 안전하게 보관

사용 예제

// app/page.tsx (Server Component)
async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{data.title}</div>;
}

Server Components를 활용하면 더 나은 성능과 사용자 경험을 제공할 수 있습니다.