[Next.js] 서버 컴포넌트 vs 클라이언트 컴포넌트 – 개념, 차이, 예시까지!

Next.js 13부터 도입된 App Router 구조에서는 컴포넌트가 자동으로 "서버 컴포넌트" 또는 "클라이언트 컴포넌트"로 구분됩니다. 이 구조를 이해하면 SSR, CSR, 데이터 최적화까지 훨씬 유연하게 다룰 수 있어요.

 

 

 📌 App Router 구조

Next.js 13+부터 제공되는 폴더 중심의 파일 기반 라우팅 시스템

기존의 pages 디렉토리 대신 app 폴더를 사용해서 라우팅, 레이아웃, 로딩 상태 등을 컴포넌트 단위로 나누어 관리할 수 있게 만든 구조입니다.

 

App Router 디렉터리 구조 예시

app/
├── layout.tsx           # 모든 페이지의 공통 레이아웃
├── page.tsx             # 루트 페이지 ('/')
├── about/
│   ├── page.tsx         # '/about' 페이지
│   └── layout.tsx       # about 전용 레이아웃 (선택)
├── dashboard/
│   ├── page.tsx         # '/dashboard'
│   ├── settings/
│   │   └── page.tsx     # '/dashboard/settings'
├── loading.tsx          # 페이지 로딩 중 보여줄 컴포넌트
├── error.tsx            # 에러 발생 시 보여줄 컴포넌트
└── not-found.tsx        # 404 페이지

• layout.tsx : 공통 레이아웃 정의(Header, Sidebar 등 유지)
• page.tsx : 실제 라우트 페이지(/about, /dashboard)
• loading.tsx : 로딩 상태 분리 가능 
• error.tsx : 에러 핸들링 커스터마이징
• not-found.tsx : 404 페이지 구성
• 중첩 레이아웃 : 라우트마다 독립적인 layout.tsx 설정가능

 

App Router vs Page Router 차이

항목	App Router(/app)	Pages Router (/pages)
경로 정의	폴더 + 파일 (page.tsx)	파일 이름 기준 (about.js)
레이아웃	layout.tsx로 중첩 가능	_app.tsx, _document.tsx로 전체 관리
서버 컴포넌트 지원	기본적으로 서버 렌더링	클라이언트 중심
로딩/에러 페이지	페이지별 loading.tsx, error.tsx	전역 처리
최신 방식	✅ Next.js 추천	유지되긴 하지만 비권장

 

 

---

 

1. 서버 컴포넌트란?

서버에서 실행되고, HTML을 만들어 클라이언트에 전달하는 컴포넌트

 

• 브라우저에 JavaScript 번들이 전송되지 않음 (더 빠름)
• DB, 파일, API 등 서버 자원 직접 접근 가능
• React의 useState, useEffect 등 클라이언트 훅 사용 불가
• 기본값이 서버 컴포넌트 (Next.js app/ 구조에서)

// 서버 컴포넌트 (기본)
export default async function ServerComponent() {
  const data = await fetch('https://api.com/data');
  return <div>{data.title}</div>;
}

 

 

 

2. 클라이언트 컴포넌트란?

브라우저에서 실행되는 컴포넌트

 

• 사용자와의 상호작용이 필요한 경우 사용 (클릭, 폼 등)
• useState, useEffect, useRef 등 React 훅 사용 가능
• 'use client' 선언 필수
• 서버에서 HTML을 미리 만들 수 없음 → CSR

'use client';

import { useState } from 'react';

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

 

 

 

3. 차이 

항목 서버 컴포넌트 클라이언트 컴포넌트

항목	서버 컴포넌트	클라이언트 컴포넌트
실행 위치	서버 (Node.js)	브라우저
React 훅 사용	❌ 불가	✅ 가능
번들 크기	작음 (JS 미포함)	큼 (JS 포함)
데이터 패칭	서버에서 바로 가능	API 호출 필요
SEO 최적화	✅ 우수	보통
선언 방식	기본값	'use client' 필요
상호작용	❌ 없음	✅ 있음