React server component

React Server Component(RSC)란?

React Server Components(RSC)는 React 18에서 도입된 기능으로, 클라이언트에서 실행되지 않고 서버에서 렌더링되는 React 컴포넌트입니다. 이를 통해 네트워크 요청을 서버에서 처리하고, 불필요한 클라이언트 사이드 번들 크기를 줄여 성능을 최적화할 수 있습니다.

1. Server Component와 Client Component 차이

 React 서버 컴포넌트 vs. 클라이언트 컴포넌트
• 실행 위치
• 서버 컴포넌트: 서버에서 실행됨
• 클라이언트 컴포넌트: 브라우저에서 실행됨
• 번들 크기
• 서버 컴포넌트: 번들에 포함되지 않음
• 클라이언트 컴포넌트: 번들에 포함됨
• 데이터 요청
• 서버 컴포넌트: 데이터베이스 및 API를 직접 요청 가능
• 클라이언트 컴포넌트: fetch API 필요
• 상태 관리
• 서버 컴포넌트: 훅(Hook) 사용 불가
• 클라이언트 컴포넌트: 사용 가능
• 이벤트 핸들링
• 서버 컴포넌트: 불가능
• 클라이언트 컴포넌트: 가능

2. Server Component의 장점
1. 초기 로딩 속도 개선: 클라이언트로 전송되는 JS 크기가 줄어들어, 페이지 로딩이 빨라짐.
2. 서버에서 직접 데이터 가져오기: 클라이언트에서 API 호출을 따로 하지 않아도 됨.
3. 보안 강화: 서버에서만 실행되므로, API 키 같은 민감한 정보가 클라이언트로 노출되지 않음.

3. 사용법

1) Server Component 만들기

Server Component 파일은 확장자를 **.server.js 또는 .tsx**로 지정할 필요 없이 기본적으로 서버에서 실행됩니다.

// app/components/ProductList.tsx (Server Component)
import db from "@/lib/db"; // 서버에서만 접근 가능한 데이터베이스

export default async function ProductList() {
  const products = await db.getProducts(); // 서버에서 직접 DB 호출

  return (
    <ul>
      {products.map((product) => (
        <li key={product.id}>{product.name}</li>
      ))}
    </ul>
  );
}

2) Client Component에서 사용하기

Server Component 내부에서는 **클라이언트 사이드 기능 (이벤트 핸들링, 상태 관리 등)**을 사용할 수 없습니다. 하지만 클라이언트 컴포넌트를 포함할 수는 있음.

// app/components/ProductPage.tsx (Server Component)
import ProductList from "./ProductList";
import AddToCartButton from "./AddToCartButton"; // Client Component

export default function ProductPage() {
  return (
    <div>
      <h1>Products</h1>
      <ProductList />
      <AddToCartButton />
    </div>
  );
}

3) 클라이언트 컴포넌트로 지정하기

서버 컴포넌트 내부에서 이벤트 핸들링이나 상태 관리가 필요한 컴포넌트는 use client 지시어를 사용해 명시적으로 클라이언트 컴포넌트로 지정해야 합니다.

// app/components/AddToCartButton.tsx (Client Component)
"use client"; // 클라이언트 컴포넌트로 선언

import { useState } from "react";

export default function AddToCartButton() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      장바구니 추가 ({count})
    </button>
  );
}

4. Server Component에서 할 수 있는 것 vs 없는 것

✅ 할 수 있는 것
• DB 요청 (fetch, prisma, mongoose 등)
• API 호출 (fetch)
• 무거운 연산 수행
• 클라이언트 사이드 번들 크기 줄이기
• 다른 Server Component 사용

❌ 할 수 없는 것
• useState, useEffect, useContext 같은 React Hook 사용 불가
• 브라우저 이벤트 핸들링 (onClick, onChange 등)
• 클라이언트 전용 라이브러리 (localStorage, window, document 등)

5. Next.js에서 Server Component 활용

Next.js 13 이후, app 디렉토리를 사용하면 기본적으로 모든 컴포넌트가 Server Component로 동작합니다.
클라이언트 컴포넌트는 use client를 추가해야 합니다.

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

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
      <ProductList />
    </div>
  );
}

6. Server Component가 적합한 경우
• 데이터베이스 조회가 필요한 경우: 클라이언트에서 API 요청을 하지 않고 서버에서 직접 처리.
• SEO가 중요한 페이지: HTML을 서버에서 완성해서 전달.
• 번들 크기를 줄이고 싶은 경우: 서버에서만 실행되는 코드이므로 클라이언트로 전달되지 않음.

7. 정리

✅ React Server Components는 서버에서 실행되는 React 컴포넌트로, 클라이언트로 불필요한 JS를 보내지 않음.
✅ 이벤트 핸들링, 상태 관리는 할 수 없지만, 데이터베이스 조회나 무거운 연산을 처리하는 데 적합함.
✅ Next.js 13+에서 app 디렉토리를 사용하면 기본적으로 Server Component로 동작하며, use client를 붙이면 Client Component가 됨.