React 고급 기술 익히기 - 11편: React 서버 컴포넌트(Server Components) 완벽 정리

1. Server Components란?

1.1 Server Components 개요

**Server Components(서버 컴포넌트)**는 서버에서 렌더링되고, 클라이언트에서 실행되지 않는 React 컴포넌트입니다. 기존 SSR(Server-Side Rendering), SSG(Static Site Generation) 방식과는 다르게 동작하며, 클라이언트에서 불필요한 JavaScript 번들 크기를 줄일 수 있습니다.

1.2 Server Components vs Client Components

특징Server ComponentsClient Components

실행 위치	서버에서 실행	브라우저에서 실행
번들 크기	번들에 포함되지 않음	브라우저로 전송됨
상태(State)	불가능	가능 (useState, useEffect 사용 가능)
이벤트 핸들링	직접 처리 불가	가능 (onClick, onChange 등)
데이터 패칭	서버에서 직접 실행 가능	useEffect 등으로 API 호출 필요

1.3 Server Components의 장점

✅ 빠른 페이지 로딩 속도: 클라이언트에서 실행되지 않기 때문에 JavaScript 번들 크기가 줄어듦
✅ 서버에서 직접 데이터 패칭 가능: API 호출 없이 서버에서 데이터를 가져와 클라이언트에 전달
✅ 보안 강화: 데이터베이스 연결, API 키 노출 방지 가능

---

2. Server Components의 동작 방식

Server Components는 클라이언트에서 실행되지 않으며, 서버에서 렌더링된 후 HTML과 함께 전송됩니다. 기본적인 동작 방식은 다음과 같습니다.

1. 요청이 들어오면 서버에서 Server Components를 렌더링
2. HTML로 변환하여 클라이언트로 전송
3. 클라이언트에서는 추가적인 JavaScript 실행 없이 그대로 표시

// Server Component (클라이언트에서 실행되지 않음)
export default async function ServerComponent() {
  const data = await fetch("https://api.example.com/data").then(res => res.json());
  return

{data.message}

;
}

위 코드는 클라이언트에서 실행되지 않고, 서버에서 실행된 후 HTML로 전달됩니다.

---

3. Next.js에서 Server Components 활용하기

3.1 Next.js에서 기본 설정

Next.js에서는 서버 컴포넌트가 기본적으로 활성화되어 있습니다. app 디렉토리 안에서 작성된 모든 컴포넌트는 기본적으로 Server Components입니다.

프로젝트 설정:

npx create-next-app@latest my-app --experimental-app
cd my-app
npm install
npm run dev

3.2 Server Components 예제 (Next.js 14 기준)

(1) 서버에서 데이터 패칭하는 Server Component

// app/components/UserList.tsx
export default async function UserList() {
  const users = await fetch("https://jsonplaceholder.typicode.com/users").then(res => res.json());
  return (

{users.map(user => (
• {user.name}
))}

  );
}

✅ 클라이언트에서 API 호출 없이 서버에서 직접 데이터 패칭

(2) Server Component에서 Client Component 포함하기

// app/components/Button.tsx (Client Component)
"use client";
export default function Button({ onClick }: { onClick: () => void }) {
  return <button onClick={onClick}>Click me</button>;
}

// app/page.tsx (Server Component)
import Button from "./components/Button";

export default function Page() {
  return (
    <div>
      <h1>Server Component</h1>
      <Button onClick={() => alert("클릭됨!")} />
    </div>
  );
}

✅ Server Component 내부에서 Client Component 사용 가능 ("use client" 선언 필요)

(3) 서버에서 데이터 처리 후 클라이언트로 전달하기

// app/components/ProductList.tsx
import ProductCard from "./ProductCard";

export default async function ProductList() {
  const products = await fetch("https://api.example.com/products").then(res => res.json());
  return (

{products.map(product => ( ))}

  );
}

✅ 서버에서 데이터를 가져와 클라이언트 컴포넌트로 전달 가능

---

4. Server Components의 한계와 고려사항

✅ 서버에서 실행되므로 상태(State)를 가질 수 없음 → useState, useEffect 사용 불가
✅ 이벤트 핸들링이 불가능 → 클릭, 입력 이벤트 등은 클라이언트 컴포넌트에서 처리해야 함
✅ SSR과 다른 개념 → Server Components는 클라이언트 번들을 줄이는 것이 목적이며, 단순 SSR과 다름

---

5. Server Components의 실무 적용 사례

✅ 대규모 데이터 조회 → 서버에서 데이터를 직접 가져와 렌더링하여 성능 최적화
✅ SEO 최적화 → 클라이언트에서 불필요한 JavaScript 실행 없이 완전한 HTML 제공
✅ 보안 강화 → API 키, 데이터베이스 연결 정보 등을 서버에서 처리하고 클라이언트에 노출하지 않음

---

결론

• Server Components는 클라이언트에서 불필요한 JavaScript 실행을 줄이고, 서버에서 렌더링을 최적화하는 기능입니다.
• Next.js와 결합하면 더욱 강력한 성능을 발휘하며, 데이터 패칭을 서버에서 직접 처리하여 클라이언트 부하를 줄일 수 있습니다.
• 실무에서 활용하면 SEO, 성능 최적화, 보안 강화 등의 장점을 극대화할 수 있습니다.