[🤖] Next.js 13+ Server Components와 Client Components, 완벽 이해하기

Next.js App Router의 핵심인 Server Components와 Client Components의 개념, 차이점, 사용 시나리오, 그리고 실질적인 성능 이점과 주의사항을 자세히 알아봐요.

게시일: 2026-03-15

수정일: 2026-03-15

15분

단어: 1,310개

정보

Next.js App Router의 Server Components와 Client Components는 웹 개발 패러다임을 변화시키는 중요한 개념이에요. 이 글에서는 두 컴포넌트의 차이점과 사용법, 그리고 실무에서 활용할 수 있는 최적화 전략을 심도 있게 다뤄볼게요.

Next.js 13 버전부터 도입된 App Router는 리액트 생태계에 큰 변화를 가져왔어요. 특히 Server Components와 Client Components라는 새로운 개념은 개발자들에게 많은 혼란을 주기도 했어요. 이 두 가지 컴포넌트 타입을 정확히 이해하는 것은 App Router 기반의 애플리케이션을 효율적으로 개발하고 최적화하는 데 필수적인 부분이에요. 잘못된 사용은 오히려 성능 저하나 개발 복잡성을 야기할 수 있기 때문에, 이번 기회에 제대로 파악하는 것이 중요하다고 생각했어요.

1️⃣ 기존 방식의 한계

기존 React 개발 방식이나 Next.js Pages Router에서는 기본적으로 모든 컴포넌트가 클라이언트에서 Hydration 과정을 거쳐 상호작용하게 돼요. 이는 다음과 같은 한계를 가졌어요.

초기 로딩 성능 저하: 모든 JavaScript 코드가 클라이언트로 전송되어야 하기 때문에 번들 사이즈가 커지고, 이는 TTI(Time To Interactive) 지연으로 이어질 수 있었어요.
서버 리소스 활용의 어려움: 데이터베이스 접근이나 환경 변수 사용 등 서버 전용 로직을 컴포넌트 내부에서 직접 수행하기 어려웠고, API 엔드포인트를 통해 데이터를 가져오는 방식만 가능했어요.
Hydration 오버헤드: 사용자 상호작용이 없는 정적인 UI임에도 불구하고, Hydration을 위한 JavaScript 코드가 반드시 필요해서 불필요한 비용이 발생했어요.

이러한 한계점들은 특히 초기 로딩 성능과 SEO가 중요한 웹 애플리케이션에서 큰 걸림돌이 되곤 했어요.

⚙️ 해결 방법

0️⃣ 핵심 아이디어: Server Components와 Client Components의 탄생

React 팀은 이러한 문제점들을 해결하기 위해 React Server Components(RSC) RFC를 발표했고, Next.js는 App Router를 통해 이를 적극적으로 도입했어요. 핵심 아이디어는 간단해요.

Server Components: 서버에서 렌더링되고, 최종 HTML 형태로 클라이언트에 전송돼요. JavaScript 번들에 포함되지 않아 클라이언트 번들 크기를 줄이고 초기 로딩 성능을 향상시켜요. 데이터 페칭, 서버 전용 로직, SEO에 유리한 정적 콘텐츠 표시에 적합해요.
Client Components: 기존 React 컴포넌트와 유사하게 클라이언트에서 렌더링되고 Hydration 과정을 거쳐 사용자 상호작용을 처리해요. useState, useEffect와 같은 훅이나 이벤트 핸들러가 필요한 동적인 UI에 사용돼요.

정보
기본적으로 App Router의 모든 컴포넌트는 Server Components로 간주돼요. 명시적으로 "use client" 지시자를 선언해야만 Client Components로 동작하게 됩니다.

1️⃣ Server Components의 특징과 사용

Server Components는 다음과 같은 특징을 가져요.

서버에서 실행: 컴포넌트의 코드가 클라이언트 JavaScript 번들에 포함되지 않아요.
데이터 페칭에 최적화: async/await를 직접 사용하여 데이터베이스나 외부 API에서 데이터를 효율적으로 가져올 수 있어요.
파일 시스템 접근: 서버 전용 API(예: fs 모듈)나 환경 변수(process.env)에 직접 접근할 수 있어요.
보안 강화: 민감한 정보(API 키 등)가 클라이언트에 노출될 위험이 줄어들어요.
제로 번들 사이즈: 클라이언트로 전송되는 JavaScript가 없으므로 번들 사이즈가 감소하고 로딩 속도가 빨라져요.

언제 Server Components를 사용하나요?

데이터를 가져와 표시하는 컴포넌트 (e.g., 블로그 게시물, 상품 목록).
데이터베이스에 직접 접근해야 하는 컴포넌트.
서버 전용 환경 변수에 접근해야 하는 컴포넌트.
사용자 상호작용이 필요 없는 정적인 UI 부분.
SEO에 중요한 메타데이터나 콘텐츠를 포함하는 컴포넌트.

2️⃣ Client Components의 특징과 사용

Client Components는 Server Components와 달리 클라이언트 브라우저에서 실행되고 Hydration 과정을 거쳐요.

클라이언트에서 실행: 브라우저 API(e.g., window, localStorage)에 접근할 수 있어요.
상호작용 처리: useState, useEffect, useRef 등의 React 훅을 사용하여 상태 관리, 생명 주기 이벤트, 사용자 입력 처리가 가능해요.
이벤트 핸들러: onClick, onChange 등의 이벤트 핸들러를 사용하여 동적인 UI를 만들어요.
번들 사이즈 증가: 클라이언트 번들에 포함되므로 너무 많은 Client Components는 번들 사이즈 증가로 이어질 수 있어요.

언제 Client Components를 사용하나요?

상태 관리가 필요한 컴포넌트 (e.g., 카운터, 폼 입력).
클라이언트 전용 이벤트 핸들러가 필요한 컴포넌트 (e.g., 버튼 클릭, 드래그앤드롭).
브라우저 API에 접근해야 하는 컴포넌트 (e.g., Geolocation, WebRTC).
Suspense를 활용한 로딩 UI.
클라이언트 사이드 라이브러리(e.g., 차트 라이브러리, 모달 라이브러리)를 사용하는 컴포넌트.

3️⃣ 상호작용 및 혼용 방법

Server Components와 Client Components는 함께 사용될 때 강력한 시너지를 발휘해요. 가장 중요한 규칙은 다음과 같아요.

Server Component는 Client Component를 임포트할 수 있어요. 그리고 Client Component에게 props를 전달할 수 있어요.
Client Component는 Server Component를 직접 임포트할 수 없어요. 대신, Server Component에서 Client Component의 children prop으로 Server Component의 내용을 전달하는 패턴을 사용할 수 있어요.

경고
Client Component 내부에서 "use client" 지시자 없이 Server Component처럼 동작하는 코드를 작성하면 에러가 발생하거나 의도하지 않은 방식으로 동작할 수 있어요. 특히 서버 전용 환경 변수 접근 등은 Client Component에서 절대 하면 안 돼요.

🧪 예시

0️⃣ 코드/설정 예시

아래 예시를 통해 Server Components와 Client Components의 사용법과 상호작용 방식을 알아볼게요.

📁 `app/page.tsx` (Server Component)

이 컴포넌트는 서버에서 데이터를 가져와 표시하고, Client Component를 자식으로 포함하고 있어요. async 키워드를 사용하여 비동기 작업을 수행할 수 있어요.


// app/page.tsx
import ClientCounter from './client-counter'; // Client Component 임포트

async function getMessage() {
  // 실제 백엔드 API 호출이나 DB 접근이 일어나는 부분이라고 가정해요.
  const response = await fetch('https://api.example.com/message');
  const data = await response.json();
  return data.message;
}

export default async function HomePage() {
  const message = await getMessage(); // 서버에서 데이터 페칭
  console.log('Server Log: Rendering HomePage'); // 서버 콘솔에만 찍혀요.

  return (
    <main>
      <h1>Server Component에서 가져온 메시지:</h1>
      <p>{message}</p>
      <ClientCounter initialCount={10} /> {/* Server Component가 Client Component를 렌더링해요 */}
      <section>
        <h2>이 섹션은 서버에서 렌더링된 정적인 부분이에요.</h2>
        <p>어떤 상호작용도 없이 빠르게 로드될 거예요.</p>
      </section>
    </main>
  );
}

📁 `app/client-counter.tsx` (Client Component)

이 컴포넌트는 사용자 상호작용이 필요한 카운터 컴포넌트예요. 반드시 파일 상단에 "use client" 지시자가 필요해요.


// app/client-counter.tsx
'use client'; // Client Component임을 명시해요.

import { useState } from 'react';

export default function ClientCounter({ initialCount }: { initialCount: number }) {
  const [count, setCount] = useState(initialCount);

  console.log('Client Log: Rendering ClientCounter'); // 브라우저 콘솔에만 찍혀요.

  return (
    <div style={{ border: '1px solid gray', padding: '1rem', margin: '1rem 0' }}>
      <h2>Client Component (상호작용 가능)</h2>
      <p>현재 카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
      <button onClick={() => setCount(count - 1)}>감소</button>
    </div>
  );
}

📁 `app/layout.tsx` (Root Layout, Server Component)

layout.tsx 파일은 기본적으로 Server Component로 동작해요. 이는 전체 레이아웃이 서버에서 한 번 구성되고, 필요한 경우 클라이언트 컴포넌트를 포함할 수 있음을 의미해요.


// app/layout.tsx
import './globals.css';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ko">
      <body>{children}</body>
    </html>
  );
}

1️⃣ 적용 결과 및 주의사항

초기 로딩 최적화: HomePage의 <main> 태그와 <section> 태그 내용은 서버에서 HTML로 미리 렌더링되어 전송되므로, 초기 로딩 시 JavaScript 번들 없이 빠르게 화면에 표시돼요. getMessage 함수는 클라이언트 번들에 포함되지 않아요.
번들 사이즈 감소: client-counter.tsx만 클라이언트 번들에 포함되고, 나머지 서버 컴포넌트 코드는 포함되지 않으므로 전반적인 클라이언트 번들 사이즈가 줄어들어요.
Hydration: ClientCounter 컴포넌트만 클라이언트에서 Hydration 과정을 거쳐 상호작용할 수 있게 돼요. HomePage의 정적인 부분은 Hydration 없이도 동작해요.

유용한 팁
Server Component가 Client Component의 children을 받는 패턴은 굉장히 강력해요. 예를 들어, ClientWrapper라는 Client Component가 있고, 그 안에 ServerContent라는 Server Component를 넣고 싶다면 이렇게 할 수 있어요.
// app/client-wrapper.tsx
'use client';
import React from 'react';
export default function ClientWrapper({ children }: { children: React.ReactNode }) {
  // 클라이언트 상태 관리 로직...
  return (
    <div className="client-boundary">
      <p>이것은 Client Component입니다.</p>
      {children} {/* children은 Server Component일 수 있어요! */}
    </div>
  );
}

// app/page.tsx (Server Component)
import ClientWrapper from './client-wrapper';
export default function HomePage() {
  return (
    <ClientWrapper>
      <p>이것은 ClientWrapper의 자식으로 들어간 Server Component 내용이에요!</p>
    </ClientWrapper>
  );
}
이 패턴은 Client Component의 상호작용 범위 내에 Server Component의 정적인 최적화 이점을 가져올 수 있어서 매우 유용해요.

📝 정리

0️⃣ 핵심 요약

Next.js App Router의 Server Components와 Client Components는 역할이 명확하게 분리되어 있어요.

Server Components:
- 서버에서 렌더링되고 HTML로 전송돼요.
- 데이터 페칭, 서버 전용 로직, 파일 시스템 접근에 유리해요.
- 클라이언트 번들 크기를 줄이고 초기 로딩 성능을 향상시켜요.
- 기본값이에요.
Client Components:
- 클라이언트에서 렌더링되고 Hydration을 거쳐 상호작용을 처리해요.
- useState, useEffect, 이벤트 핸들러, 브라우저 API 접근에 사용돼요.
- 파일 상단에 'use client' 지시자가 필요해요.

이 둘의 적절한 조합은 성능과 개발 편의성을 동시에 잡을 수 있는 강력한 도구예요. 최대한 Server Components를 기본으로 사용하고, 상호작용이 필요한 최소한의 부분만 Client Components로 분리하는 것이 좋은 전략이에요.

1️⃣ 다음 액션

Next.js 공식 문서의 Server Components 섹션을 다시 한번 꼼꼼히 읽어보세요.
Next.js 캐싱 전략(데이터 캐싱, Full Route Cache 등)과 Server Components가 어떻게 시너지를 내는지 추가적으로 학습해 보세요.
스트리밍(Streaming)과 Suspense가 Server Components의 점진적 렌더링과 어떻게 연관되는지 알아보는 것도 큰 도움이 될 거예요.

📮 참고

박상은

아무것도 하지 않을 거면 죽어버려.

연관된 포스트

[🤖] Next.js App Router에서 Server Components와 Client Components 제대로 활용하기 썸네일

2026-03-15

단어: 1,271개

15분

[🤖] Next.js App Router에서 Server Components와 Client Components 제대로 활용하기

Next.js 13+ App Router 환경에서 Server Components와 Client Components의 개념, 차이점, 그리고 실용적인 활용 전략을 상세히 알아보고, 성능 최적화와 개발 효율성을 높이는 방법을 공유해요.

[🤖] Next.js App Router: Server Components와 Client Components, 완벽 정복해요! 썸네일