React Server Components - 서버에서 렌더링되는 컴포넌트

React Server Components(RSC)는 서버에서만 실행되고, 클라이언트로 JavaScript 번들을 전송하지 않는 새로운 컴포넌트 모델입니다.
Next.js 13+ App Router에서 기본으로 사용되며, 성능과 번들 크기 최적화에 큰 도움을 줍니다.

---

1. Server Components vs Client Components

// Server Component (기본)
async function UserList() {
  const users = await fetchUsers(); // 서버에서 직접 데이터 패칭
  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// Client Component
"use client";
import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

• Server Components는 "use client"가 없으면 기본적으로 서버에서 실행됩니다.
• 브라우저 API, 상태, 이벤트 핸들러가 필요하면 Client Component로 만들어야 합니다.

---

2. Server Components의 장점

1. 번들 크기 감소: 서버 컴포넌트는 클라이언트로 전송되지 않음
2. 직접 DB 접근: 서버에서 데이터베이스나 파일 시스템에 직접 접근 가능
3. 보안: API 키나 시크릿을 서버에서만 사용
4. 성능: 초기 로딩 시간 단축