서버 컴포넌트

Next.js 16 App Router의 가장 큰 변화는 서버 컴포넌트(Server Components) 도입입니다.

이 아키텍처는 React 애플리케이션의 성능, 보안, 개발 경험을 함께 개선하는 방향을 제시했습니다.

클라이언트 컴포넌트 중심 개발에 익숙하다면, 서버 컴포넌트의 개념과 작동 원리를 정확히 이해하는 것이 App Router를 제대로 활용하는 첫걸음입니다.

이 절에서는 서버 컴포넌트가 무엇이며, 왜 필요한지, 그리고 어떻게 동작하는지에 대해 심도 있게 알아보겠습니다.

서버 컴포넌트란 무엇인가요?

서버 컴포넌트(Server Components)는 이름 그대로 서버 환경에서 렌더링되고 실행되는 React 컴포넌트입니다.

기존의 React 컴포넌트(현재 Next.js App Router에서는 클라이언트 컴포넌트라고 명명)는 항상 브라우저(클라이언트)에서 실행되는 것과 대조적입니다.

• 기본값: Next.js App Router에서 .tsx, .jsx 등 모든 컴포넌트 파일은 명시적으로 "use client" 지시어를 사용하지 않는 한 기본적으로 서버 컴포넌트로 간주됩니다.
• 서버에서만 실행: 컴포넌트 내부의 코드가 클라이언트 번들에 포함되지 않고 서버에서만 실행됩니다.
• 제로(0) 번들 사이즈: 서버 컴포넌트 코드는 클라이언트에 전송되지 않으므로, 클라이언트 측 JavaScript 번들 크기를 획기적으로 줄일 수 있습니다. 이는 특히 모바일 환경에서 초기 로딩 속도에 큰 영향을 줍니다.
• 직접적인 백엔드 접근: 데이터베이스, 파일 시스템, 내부 API 등 서버 전용 자원에 직접 접근하고 데이터를 가져올 수 있습니다. Route Handler를 만들 필요 없이 컴포넌트 내에서 바로 데이터를 페칭할 수 있다는 의미입니다.
• async/await 지원: 비동기 함수로 정의할 수 있어 async/await를 사용하여 데이터 페칭을 매우 직관적으로 작성할 수 있습니다.
• 상태 및 효과 없음: useState, useEffect와 같은 React 훅을 사용할 수 없습니다. (이는 클라이언트 컴포넌트의 역할입니다.)
• 이벤트 핸들러 없음: onClick, onChange와 같은 클라이언트 사이드 이벤트 핸들러를 직접 추가할 수 없습니다.
• React Context 사용 불가: React Context를 직접 사용할 수 없습니다. (하지만 서버 컴포넌트 간에는 prop 드릴링 또는 서버 전용 캐싱 패턴을 사용할 수 있습니다.)

서버 컴포넌트가 필요한 이유

서버 컴포넌트는 기존의 클라이언트 중심 렌더링 방식이 가졌던 여러 문제점을 해결하고 다음과 같은 이점을 제공합니다.

서버 컴포넌트 작동 원리

Next.js 앱이 서버 컴포넌트를 사용하여 페이지를 렌더링하는 과정은 다음과 같습니다.

서버 컴포넌트 예시 (복습)

이전 장에서 다뤘던 많은 페이지 컴포넌트와 레이아웃 컴포넌트가 이미 서버 컴포넌트로 작성되었습니다.

// "use client" 지시어가 없으므로 서버 컴포넌트입니다.

import Link from 'next/link';

// 이 함수는 서버에서 실행됩니다.
async function getUserInfo() {
  console.log('Fetching user info on server...');
  // 실제 DB 접근 또는 내부 API 호출
  await new Promise(resolve => setTimeout(resolve, 500)); // 지연 시뮬레이션
  return { username: '서버 사용자', role: 'admin' };
}

export default async function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const userInfo = await getUserInfo(); // 서버에서 데이터 페칭

  return (
    <div style={{ display: 'flex', minHeight: '100vh' }}>
      <aside style={{ width: '250px', padding: '20px', backgroundColor: '#f0f4f8', borderRight: '1px solid #e0e0e0' }}>
        <h2>관리자 대시보드</h2>
        <p>환영합니다, {userInfo.username}님!</p> {/* 서버에서 가져온 데이터 사용 */}
        <p>권한: {userInfo.role}</p>
        <nav style={{ marginTop: '20px' }}>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            <li style={{ marginBottom: '10px' }}><Link href="/dashboard">홈</Link></li>
            <li style={{ marginBottom: '10px' }}><Link href="/dashboard/settings">설정</Link></li>
            {/* 여기에 다른 서버 컴포넌트나 클라이언트 컴포넌트를 자식으로 렌더링 */}
          </ul>
        </nav>
      </aside>
      <main style={{ flexGrow: 1, padding: '20px' }}>
        {children} {/* 하위 페이지나 레이아웃이 여기에 렌더링됩니다. */}
      </main>
    </div>
  );
}

위 DashboardLayout은 async 함수로 정의되어 getUserInfo를 호출하고, 이 함수는 서버에서 실행되어 데이터를 가져옵니다.

이 모든 과정은 클라이언트의 JavaScript 번들과는 무관하게 서버에서 처리됩니다.

서버 컴포넌트를 설계할 때는 “서버에서 끝낼 일”과 “브라우저에서 이어갈 일”을 먼저 나누는 것이 좋습니다.

데이터 접근, 민감 정보, 무거운 렌더링은 서버에 남기고, 상태와 이벤트가 필요한 작은 부분만 클라이언트 경계로 분리하면 번들 크기와 보안 면에서 모두 유리합니다.

서버 컴포넌트는 데이터 접근, 보안 경계, 번들 크기 절감을 한곳에서 해결하므로 기본값으로 두고 필요한 상호작용만 클라이언트로 넘기는 방식이 가장 안정적입니다.

서버 컴포넌트는 Next.js App Router의 성능, 보안, 개발 편의성을 극대화하는 핵심 개념입니다.

이를 통해 개발자는 사용자에게 더 빠르고 효율적인 웹 경험을 제공하는 동시에, 백엔드 로직과 프론트엔드 UI를 통합하여 개발 복잡성을 줄일 수 있습니다.

마지막으로 서버 컴포넌트가 번들 크기, 데이터 접근, 보안 경계를 어떻게 바꾸는지 정리합니다.