# React Server Components 마스터하기 React Server Components(RSC)는 React의 렌더링 패러다임을 완전히 바꾸는 혁신적인 기능입니다. ## RSC란? 서버에서만 실행되는 React 컴포넌트로, 클라이언트 번들에 포함되지 않습니다. ### 기존 방식과의 차이 **전통적인 SSR:** ``` 서버: HTML 생성 → 클라이언트: Hydration ``` **React Server Components:** ``` 서버: 컴포넌트 실행 → 특수 포맷으로 전송 → 클라이언트: 렌더링 ``` ## 장점 ### 1. 번들 사이즈 감소 ```tsx // Server Component - 클라이언트 번들에 포함 안 됨 import { marked } from 'marked'; // 큰 라이브러리 import fs from 'fs'; // Node.js 모듈 export default async function BlogPost() { const content = fs.readFileSync('post.md', 'utf-8'); const html = marked(content); return

; } ``` ### 2. 직접 데이터 액세스 ```tsx // Server Component async function UserProfile({ userId }: { userId: string }) { // 직접 DB 쿼리 const user = await db.user.findUnique({ where: { id: userId } }); return (

{user.name}

{user.email}

); } ``` ### 3. 자동 코드 스플리팅 ```tsx // 모든 import가 자동으로 코드 스플리팅됨 import HeavyComponent from './HeavyComponent'; export default function Page() { return ; } ``` ## Server vs Client Components ### Server Component (기본) ```tsx // app/page.tsx // 기본적으로 Server Component export default async function Page() { const data = await fetch('https://api.example.com/data'); return

{data.title}

; } ``` **특징:** - `async` 가능 - 직접 데이터 페칭 - 서버 전용 API 사용 가능 - 상태, 이벤트 핸들러 불가 ### Client Component ```tsx 'use client'; // 필수! import { useState } from 'react'; export default function Counter() { const [count, setCount] = useState(0); return ( ); } ``` **특징:** - 상태 관리 가능 - 이벤트 핸들러 사용 - 브라우저 API 접근 - useEffect 등 Hooks 사용 ## 컴포지션 패턴 ### Server에서 Client로 ```tsx // Server Component import ClientCounter from './ClientCounter'; export default async function Page() { const data = await fetchData(); return (

{data.title}

); } ``` ### Client에서 Server로 (Children) ```tsx // Client Component 'use client'; export default function ClientLayout({ children }) { return (

{children} {/* Server Component 가능! */}

); } ``` ```tsx // Server Component export default function Page() { return ( {/* 작동함! */} ); } ``` ## 데이터 페칭 패턴 ### Parallel Data Fetching ```tsx async function Page() { // 병렬로 실행됨 const [user, posts] = await Promise.all([ fetchUser(), fetchPosts() ]); return ( <> ); } ``` ### Sequential Data Fetching ```tsx async function Page() { const user = await fetchUser(); const posts = await fetchPosts(user.id); // user에 의존 return ; } ``` ### Streaming with Suspense ```tsx import { Suspense } from 'react'; export default function Page() { return (

); } ``` ## 캐싱 전략 ### fetch 캐싱 ```tsx // 자동 캐싱 (기본값) const data = await fetch('https://api.example.com/data'); // 캐싱 비활성화 const data = await fetch('https://api.example.com/data', { cache: 'no-store' }); // Revalidate const data = await fetch('https://api.example.com/data', { next: { revalidate: 3600 } // 1시간 }); ``` ## 실전 팁 1. **기본은 Server Component로** - 상태나 이벤트 필요할 때만 Client 2. **데이터는 사용처에서 페칭** - Props drilling 불필요 3. **Suspense 경계 활용** - 점진적 렌더링 4. **캐싱 전략 명확히** - 데이터 특성에 맞게 RSC는 React의 미래입니다. 지금 바로 시작하세요!