[ Next.js ] Server 컴포넌트 vs Client 컴포넌트 완벽 이해하기

💡 Next.js(App Router) 환경에서 개발할 때 가장 먼저 마주치는 개념이 바로 서버 컴포넌트(Server Components)와 클라이언트 컴포넌트(Client Components)입니다. 이 두 가지의 특징과 올바른 사용법을 핵심만 정리해 보겠습니다.

 

🔍 컴포넌트 비교

Next.js는 기본적으로 모든 컴포넌트를 서버 컴포넌트(Server Component)로 인식
클라이언트 컴포넌트를 사용하려면 파일 최상단에 "use client"라는 지시어를 명시해야 합니다.

구분	Server Component	Client Component
기본 인식	Next.js의 기본값	파일 최상단에 "use client" 명시 필요
주요 역할	보안이 중요한 데이터 처리, API 호출, DB 직접 접근	사용자 인터랙션(클릭, 입력), UI 상태 관리
React Hook	useState, useEffect 등 사용 불가	모든 React Hook 자유롭게 사용 가능

 

💡 중요 포인트
서버 컴포넌트 내에 서버 전용 로직(예: DB 직접 조회 등)이 없고, 클라이언트 컴포넌트처럼 동작할 수 있는 구조라면 Next.js가 빌드 시점에 이를 클라이언트 컴포넌트처럼 다룰 수도 있습니다. 따라서 런타임 동작 원리를 이해하고 명확하게 역할을 구분하는 것이 중요합니다.

 

🔥 가장 헷갈리는 '중첩 규칙' (상호작용)

• 서버 컴포넌트는 클라이언트 컴포넌트를 자식으로 가질 수 있습니다.
• 클라이언트 컴포넌트는 서버 컴포넌트를 직접 import해서 가질 수 없습니다.

💡 실전 활용 및 중첩 규칙

 

Server Component

// async 는 Server Components 에서만 쓸 수 있음

import Button from "./Button";

export default async function DataFetch() {
  return (
    <>
      <h1>DataFetch</h1>
      <Button /> {/* 가능 */}
    </>
  );
}

 

Client Components

'use client';

import DataFetch from "./DataFetch";

export default function Button() {
  return (
    <>
    	{/* Server Component */}
    	<DataFetch /> 
		
        <h1 onClick={() => alert("click")}>Button</h1>
    </>
  );
}

 

Client Component 에 Server Component 를 넣으면 바로 에러가 발생

 

 

"데이터를 가져오고(Fetch) 보안이 필요한 로직은 서버 컴포넌트에게, 상태(State)를 관리하고 유저와 상호작용하는 UI는 클라이언트 컴포넌트에게!"

 

처음에는 두 컴포넌트의 경계가 헷갈릴 수 있지만, "서버 컴포넌트를 부모로 두고 클라이언트 컴포넌트를 자식으로 조립한다"는 방향성만 기억하시면 대다수의 에러를 예방할 수 있습니다.

 

Next.js App Router의 성능을 100% 활용하기 위해, 컴포넌트를 설계할 때 이 두 가지 역할을 먼저 명확히 나누는 습관을 들여보세요!