Article

RSC란 무엇인가

**React Server Components(RSC)**는 서버에서만 실행되는 React 컴포넌트입니다.

클라이언트로 JavaScript 번들이 전송되지 않으므로 번들 크기를 줄일 수 있습니다.

성능 비교

실제 프로덕션 앱에서 RSC 적용 전후를 비교했습니다:

• FCP(First Contentful Paint): 1.8s -> 0.9s (50% 개선)
• JS 번들 크기: 450KB -> 180KB (60% 감소)
• TTI(Time to Interactive): 3.2s -> 1.5s (53% 개선)

경계 설정 전략

// Server Component (기본값)
async function ArticleList() {

const articles = await db.articles.findMany(); return (

// Client Component (인터랙션이 필요한 경우만) 'use client'; function LikeButton({ articleId }) { const [liked, setLiked] = useState(false); return <button onClick={() => setLiked(!liked)}>Like; }

> RSC는 만능이 아닙니다. 인터랙티브한 UI에는 여전히 클라이언트 컴포넌트가 필요합니다.