React에서 서버 컴포넌트(Server Components) 실험하기

React 18부터 실험적으로 도입된 서버 컴포넌트는 클라이언트가 아닌 서버에서 렌더링되어 성능 최적화에 도움을 줍니다. 이번 글에서는 서버 컴포넌트의 개념과 간단한 사용법을 실무 중심으로 살펴보겠습니다.

1. 서버 컴포넌트란?

서버 컴포넌트(Server Components)는 React 컴포넌트 중 서버에서만 렌더링되고, 클라이언트로는 HTML과 데이터만 전송되는 컴포넌트입니다. 클라이언트의 자바스크립트 번들 크기를 줄이고 초기 로딩 속도를 향상시킵니다.

2. 실험 환경 설정

서버 컴포넌트는 아직 React 공식 릴리즈에 완전 통합되진 않았지만, Next.js 13 이상과 같이 일부 프레임워크에서 지원합니다. 간단한 실험을 위해 Next.js 13 앱 디렉터리를 설정하세요.

3. 서버 컴포넌트 작성하기

서버 컴포넌트는 기본적으로 .js 또는 .jsx 파일 안에 작성하고 컴포넌트 최상단에 export const dynamic = 'error' 같은 설정 없이 작성하면 서버 컴포넌트로 인식됩니다. 또한, use client 지시어가 없으면 서버 컴포넌트입니다.

// components/ServerGreeting.jsx
export default function ServerGreeting() {
  const currentTime = new Date().toLocaleTimeString();
  return <div>서버 시간: {currentTime}</div>;
}

4. 클라이언트 컴포넌트와 혼용

서버 컴포넌트에서 클라이언트 컴포넌트를 불러올 수 있지만 반대는 불가능합니다. 클라이언트 컴포넌트에는 반드시 "use client" 지시어를 추가해야 합니다.

// components/ClientButton.jsx
"use client";

import { useState } from 'react';

export default function ClientButton() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>클릭 {count} </button>;
}

5. 사용 예제

서버 컴포넌트에서 클라이언트 컴포넌트를 감싸서 사용하면 서버에서 데이터를 가져온 뒤 클라이언트 인터랙션을 처리할 수 있습니다.

// app/page.jsx
import ServerGreeting from '../components/ServerGreeting';
import ClientButton from '../components/ClientButton';

export default function Page() {
  return (
    <div>
      <ServerGreeting />
      <ClientButton />
    </div>
  );
}

6. 마치며

서버 컴포넌트는 복잡한 클라이언트 로직 없이 서버에서 UI 일부를 렌더링해 초기 로딩 속도와 렌더링 비용을 줄이는 데 크게 도움이 됩니다. 빠른 퍼포먼스가 중요한 프로젝트에서 도입을 고민해볼 만합니다.