06-3_RSC

// 이 컴포넌트는 서버에서 실행되지만... async function BlogPost() { const post = await db.posts.get(id); return ( <article> <MarkdownRenderer content={post.content} /> </article> ); }

클라이언트 번들: - react.js (100KB) - marked.js (50KB) ← 서버에서만 쓰는데? - highlight.js (200KB) ← 서버에서만 쓰는데? - app.js (...)

// Server Component (기본) async function BlogPost({ id }) { const post = await db.posts.get(id); // DB 직접 접근 return ( <article> <h1>{post.title}</h1> <LikeButton postId={id} /> {/* Client Component */} </article> ); } // Client Component 'use client'; function LikeButton({ postId }) { const [liked, setLiked] = useState(false); // 상태 사용 return ( <button onClick={() => setLiked(!liked)}> {/* 이벤트 핸들러 */} {liked ? '❤️' : '🤍'} </button> ); }

서버 (SSR): BlogPost 실행 → DB 조회 → HTML 생성 LikeButton도 실행됨! (HTML 생성용) 클라이언트: LikeButton Hydration → 이벤트 핸들러 연결

// BlogPost.jsx (Server Component) import { LikeButton } from './LikeButton'; // 'use client' 파일 async function BlogPost({ id }) { return<LikeButton postId={id} />; }

// 서버 번들에서 LikeButton은 참조 객체가 됨 const LikeButton = { $$typeof: Symbol.for('react.client.reference'), $$id: './LikeButton.js', $$name: 'LikeButton' };

// ❌ 불가능 'use client'; import { ServerComponent } from './ServerComponent';

// ServerComponent.jsx (Server Component) async function ServerComponent() { // 이런 코드가 있다고 상상해보세요 const db = await Database.connect('postgres://admin:secret123@db.company.com'); const apiKey = process.env.STRIPE_SECRET_KEY; // sk_live_xxx... const data = await db.query('SELECT * FROM users'); return<UserList users={data} />; }

1. Client Component → 클라이언트 번들에 포함 2. import된 ServerComponent 코드도 → 클라이언트 번들에 포함 3. 브라우저 DevTools → Sources 탭 → 번들 파일 열기 4. 🚨 DB 연결 문자열, API 키 전부 노출!

// ❌ 불가능 'use client'; import { ServerContent } from './ServerContent'; function ClientWrapper() { return ( <div> <ServerContent /> {/* 에러: Client에서 Server import */} </div> ); }

// ✅ 가능: children 패턴 // Page.jsx (Server Component) import { ClientWrapper } from './ClientWrapper'; import { ServerContent } from './ServerContent'; function Page() { return ( <ClientWrapper> <ServerContent /> {/* 여기서 이미 렌더링됨 */} </ClientWrapper> ); } // ClientWrapper.jsx 'use client'; function ClientWrapper({ children }) { const [show, setShow] = useState(true); return show ? children : null; // children은 이미 렌더링된 JSX }

// Server Component async function Page() { const user = await getUser(); return ( <div> <h1>Hello, {user.name}</h1> <LikeButton /> </div> ); }

0:["$","div",null,{"children":[ ["$","h1",null,{"children":"Hello, Dan"}], ["$","$L1",null,{}] ]}] 1:I["./LikeButton.js","LikeButton"]

async function Page() { const user = await getUser(); // 빠름 (100ms) return ( <div> <Header user={user} /> <Suspense fallback={<Loading />}> <Posts /> {/* 느림 (500ms) */} </Suspense> </div> ); }

# 첫 청크 (즉시) 0:{"user":{"name":"Dan"}} 1:["$","div",null,{"children":[ ["$","Header",...], ["$","$Sreact.suspense",{"fallback":"Loading...","children":"$2"}] ]}] 2:$Sreact.suspense --- # 두 번째 청크 (500ms 후) 2:["posts":[...]]

서버: [Fizz] → HTML 스트림 → 브라우저 (초기 렌더링) [Flight] → RSC Payload 스트림 → React (갱신)

// ❌ 전통적 방식: API 분리 필요 // GET /api/post/123 // 클라이언트에서 fetch + 상태 관리 // ✅ RSC: 하나의 컴포넌트 트리 async function BlogPost({ id }) { const post = await db.posts.get(id); // 서버에서 데이터 return ( <article> <h1>{post.title}</h1> <LikeButton postId={id} liked={post.liked} /> {/* 클라이언트 인터랙션 */} </article> ); }

// 이 모든 라이브러리가 클라이언트 번들에 포함되지 않음 import { marked } from 'marked'; // 50KB import hljs from 'highlight.js'; // 200KB import { sanitize } from 'dompurify'; // 30KB async function MarkdownRenderer({ content }) { const html = marked(content, { highlight: (code) => hljs.highlightAuto(code).value }); const safe = sanitize(html); return<div dangerouslySetInnerHTML={{ __html: safe }} />; }

async function Editor({ userId }) { const user = await db.users.get(userId); if (user.isPremium) { return<PremiumEditor />; // 프리미엄 사용자만 이 번들 로드 } return<BasicEditor />; // 일반 사용자는 이것만 }

async function AdminPanel({ userId }) { const user = await db.users.get(userId); if (!user.isAdmin) { return<AccessDenied />; } // 이 코드는 서버에만 존재 const secrets = await db.secrets.getAll(); return<SecretsList secrets={secrets} />; }

CSR: [CDN] → 정적 파일 → 클라이언트에서 모든 처리 RSC: [서버] → 매 요청마다 컴포넌트 실행 → 결과 전송

// 이게 Server일까 Client일까? function Counter() { const [count, setCount] = useState(0); // 에러! return<button onClick={() => setCount(c => c + 1)}>{count}</button>; }

// ❌ 많은 라이브러리가 아직 RSC 미지원 import { DatePicker } from 'legacy-ui-library'; // 'use client' 필요할 수 있음 import { Chart } from 'chart-library'; // window 객체 접근

정적 페이지: [빌드] → HTML 캐시 → 빠른 응답 RSC: [요청] → 서버 실행 → 캐시? → 응답

// Server Component 테스트 // - 실제 서버 환경 또는 모킹 필요 // - async 컴포넌트 처리 // - DB/API 모킹 // Client Component 테스트 // - 기존 방식과 유사 // - 하지만 props로 받는 서버 데이터 모킹 필요

// ❌ 불필요하게 'use client' 사용 'use client'; // 왜? function StaticContent() { return<div>Hello World</div>; // 상태도 이벤트도 없음 } // ✅ Server Component로 충분 function StaticContent() { return<div>Hello World</div>; }

// ❌ 너무 높은 곳에 'use client' 'use client'; // 전체 페이지가 Client Component가 됨 function Page() { return ( <div> <Header /> <Content /> {/* 이것들도 전부 클라이언트 번들에 포함 */} <Footer /> </div> ); } // ✅ 필요한 곳에만 'use client' function Page() { return ( <div> <Header /> <Content /> <InteractiveWidget /> {/* 이것만 'use client' */} <Footer /> </div> ); }

[하나의 컴포넌트 트리] ↓ [Server Components] + [Client Components] ↓ ↓ 서버에서만 실행 서버(SSR) + 클라이언트 ↓ ↓ RSC Payload로 번들에 포함되어 결과만 전달 Hydration

┌─────────────────────────────────────────┐ │ Server Components │ │ ┌─────────────────────────────────┐ │ │ │ async function Page() { │ │ │ │ const data = await fetch(); │ │ │ │ return <ClientButton />; │ │ │ │ } │ │ │ └─────────────────────────────────┘ │ │ ↓ 참조로 변환 ↓ │ ├─────────────────────────────────────────┤ │ 'use client' 경계 │ ├─────────────────────────────────────────┤ │ Client Components │ │ ┌─────────────────────────────────┐ │ │ │ 'use client'; │ │ │ │ function ClientButton() { │ │ │ │ const [x, setX] = useState(); │ │ │ │ return <button>...</button>; │ │ │ │ } │ │ │ └─────────────────────────────────┘ │ │ ↑ import 금지 ↑ │ └─────────────────────────────────────────┘

// 전통적 방식 async function handleSubmit(formData) { await fetch('/api/todos', { method: 'POST', body: JSON.stringify({ text: formData.get('text') }) }); }

// Server Actions 'use server'; async function addTodo(formData) { await db.todos.create({ text: formData.get('text') }); } // 클라이언트에서 그냥 호출 <form action={addTodo}> <input name="text" /> </form>