App Router에서 Server Components는 어떻게 동작하나요?

Question

Accepted Answer

**React Server Components(RSC)**는 **서버에서만** 렌더링됩니다. 그 JavaScript는 절대 브라우저로 전송되지 않습니다. App Router에서 모든 컴포넌트는 **기본적으로** Server Component이며, 클라이언트 동작은 명시적으로 옵트인합니다. ## Server Component가 할 수 있는 것 ```tsx // app/users/page.tsx — Server Component ("use client" 없음) import db from "@/lib/db"; export default async function Users() { const users = await db.user.findMany(); // ✅ 직접 DB 접근, 서버에서 실행 return (

{u.name}

); } ``` Server Component는 **async**일 수 있고, 데이터를 직접 `await`하며, 서버 전용 리소스(데이터베이스, 파일시스템, 비밀 정보)에 접근할 수 있습니다. 서버에서 실행되기 때문입니다. 데이터를 페칭하는 데 API 계층이 필요 없고, 비밀 정보는 클라이언트에 절대 도달하지 않습니다. ## 가장 큰 이점: 해당 컴포넌트의 클라이언트 JS가 0 브라우저는 컴포넌트의 코드나 의존성이 아니라 **렌더링된 HTML/UI**를 받습니다. 무거운 마크다운이나 날짜 라이브러리를 사용하는 Server Component는 그 라이브러리를 브라우저로 **전혀** 보내지 않습니다. 번들 크기를 극적으로 줄여 줍니다. ## Server Component가 할 수 없는 것 ```tsx // ❌ 이들은 Client Component에서만 동작 useState, useEffect, useRef // 훅 (서버에는 상호작용/상태 없음) onClick, onChange // 이벤트 핸들러 window, localStorage, document // 브라우저 전용 API ``` 상호작용, 상태, 이펙트, 브라우저 API가 없습니다. 이들은 Client Component가 필요합니다. ## 서버와 클라이언트 조합 ```tsx // Server Component가 데이터를 페칭하고 상호작용형 Client Component로 전달 import LikeButton from "./LikeButton"; // "use client" 컴포넌트 export default async function Post({ id }) { const post = await getPost(id); // 서버 측 페칭 return <>

; } ``` 패턴: Server Component가 데이터/구조를 담당하고, 상호작용이 필요한 곳에만 Client Component("섬")를 끼워 넣습니다. ## 왜 중요한가 Server Components는 App Router를 정의하는 기능입니다. 클라이언트 번들 크기를 줄이고(다운로드/파싱할 JS 감소), API 없이 안전한 서버 측 데이터 접근을 가능하게 하며, 성능과 SEO를 개선합니다. 이들이 기본값이라는 점과 무엇이 컴포넌트를 Client Component로 만드는지를 아는 것은 App Router 앱을 효율적으로 구성하는 데 근본적입니다.