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

Next.js 13+ App Router에서 Server Components와 Client Components가 어떻게 동작하고, 언제 어떤 컴포넌트를 사용해야 하는지 명확히 이해하여 성능 최적화와 효율적인 개발을 이루는 방법을 자세히 알아봐요.

게시일: 2026-03-15

수정일: 2026-03-15

20분

단어: 1,844개

정보

Next.js 13+ App Router의 핵심 개념인 Server Components와 Client Components를 깊이 있게 이해하고, 실제 프로젝트에 올바르게 적용하는 방법을 배워봐요.

🤔 문제/배경

0️⃣ 왜 이 주제를 다루는가

Next.js 13부터 도입된 App Router는 기존 Pages Router와는 근본적으로 다른 아키텍처를 가지고 있어요. 그 중심에는 Server Components와 Client Components라는 새로운 패러다임이 자리 잡고 있죠. 하지만 많은 개발자분들이 이 두 가지 컴포넌트의 명확한 차이점과 사용 시점을 헷갈려 하세요. 언제 "use client"를 붙여야 할지, 데이터를 어디서 페칭해야 할지, 심지어 어떤 컴포넌트가 더 좋은 것인지에 대한 오해도 많아요.
이 글에서는 이러한 혼란을 해소하고, Next.js의 강력한 기능을 최대한 활용할 수 있도록 두 컴포넌트의 동작 원리와 활용 전략을 명확하게 짚어 드릴게요.

1️⃣ 기존 방식의 한계

기존의 React 개발이나 Next.js Pages Router 환경에서는 모든 컴포넌트가 기본적으로 클라이언트에서 렌더링되었어요. 서버 렌더링(SSR)도 결국은 서버에서 컴포넌트를 미리 렌더링하여 HTML을 생성한 후, 클라이언트에서 다시 하이드레이션(Hydration) 과정을 거쳐 인터랙티브하게 만드는 방식이었죠. 이러한 방식은 다음과 같은 한계점을 가지고 있었어요.

• 번들 사이즈 증가: 모든 컴포넌트 로직이 자바스크립트 번들에 포함되어 클라이언트로 전송되었어요. 이는 초기 로딩 시간을 길게 만들고, 특히 저사양 기기나 네트워크 환경에서 사용자 경험을 저해하는 원인이 될 수 있었죠.
• 초기 로딩 성능 저하: 클라이언트 측에서 모든 자바스크립트를 다운로드하고 실행해야만 페이지가 인터랙티브해지므로, First Contentful Paint(FCP)나 Largest Contentful Paint(LCP) 같은 초기 로딩 지표에 부정적인 영향을 주었어요.
• 서버 자원 낭비 (일부 경우): 서버에서 데이터를 가져와서 클라이언트에 전달하고, 클라이언트는 이 데이터를 다시 가공해서 UI를 그리는 과정이 반복되는 경우도 있었어요. 민감한 데이터나 서버에서만 접근 가능한 로직을 클라이언트 코드에서 다루기 어려웠고요.

정보

하이드레이션(Hydration)은 서버에서 생성된 정적 HTML을 클라이언트 측 React 애플리케이션이 "인수받아" 상호작용 가능한 상태로 만드는 과정을 의미해요.

⚙️ 해결 방법

0️⃣ 핵심 아이디어

Next.js App Router의 핵심 아이디어는 **"서버의 이점과 클라이언트의 이점을 모두 활용하자"**예요. 이를 위해 컴포넌트를 서버에서 렌더링되는 Server Components와 클라이언트에서 렌더링되는 Client Components로 명확하게 구분했어요.

• Server Components:

  • 기본값이에요. "use client" 디렉티브가 없는 모든 컴포넌트는 Server Component로 간주돼요.
  • 서버에서만 실행되기 때문에 클라이언트 자바스크립트 번들에 포함되지 않아요.
  • 데이터베이스 직접 접근, 파일 시스템 접근, API 키와 같은 민감한 정보 관리 등 서버 환경의 이점을 활용할 수 있어요.
  • 초기 페이지 로딩 속도와 SEO에 매우 유리해요.

• Client Components:

  • 파일 상단에 "use client" 디렉티브를 선언해야 해요.
  • 브라우저에서만 실행될 수 있는 useState, useEffect, onClick 같은 React 훅이나 브라우저 API(예: window, localStorage)를 사용하는 컴포넌트예요.
  • 사용자 인터랙션이 필요한 모든 부분에 사용돼요.

이러한 분리를 통해 Next.js는 불필요한 클라이언트 자바스크립트 전송을 최소화하고, 초기 로딩 성능을 극대화하면서도 풍부한 사용자 경험을 제공할 수 있게 되었어요.

1️⃣ 적용 방법

두 컴포넌트를 언제 어떻게 사용해야 할까요? 명확한 기준을 가지고 설계하는 것이 중요해요.

Server Components의 활용

거의 모든 컴포넌트는 기본적으로 Server Component로 시작해야 한다고 생각하시면 돼요.

• 데이터 페칭: 서버에서 직접 데이터를 가져올 때 (예: 데이터베이스, 내부 API).

  // app/page.tsx
  import { Product } from '@/lib/types'; // 타입 정의가 있다고 가정해요.
  
  async function getProducts(): Promise<Product[]> {
    const res = await fetch('https://api.example.com/products'); // 서버에서 직접 데이터를 가져와요.
    if (!res.ok) {
      throw new Error('Failed to fetch products');
    }
    return res.json();
  }
  
  export default async function HomePage() {
    const products = await getProducts(); // await 키워드를 사용할 수 있어요.
  
    return (
      <section>
        <h1>베스트셀러 상품</h1>
        <ul>
          {products.map((product) => (
            <li key={product.id}>{product.name} - {product.price}원</li>
          ))}
        </ul>
      </section>
    );
  }
  

  유용한 팁

  Server Components에서는 async/await를 직접 사용할 수 있어서 useEffect나 useState 없이도 데이터를 효율적으로 페칭할 수 있어요.

• 민감한 정보 처리: API 키, 데이터베이스 자격 증명 등 클라이언트에 노출되면 안 되는 정보를 사용하는 로직.

• 번들 사이즈 최적화: 인터랙션이 없는 정적인 UI, 마크다운 렌더링, 복잡한 계산 로직 등은 클라이언트 번들에 포함시킬 필요가 없으므로 Server Component로 작성해요.

• SEO: 초기 렌더링 시 완전한 HTML이 생성되므로 검색 엔진 최적화에 유리해요.

Client Components의 활용

"use client" 디렉티브를 명시하여 Client Component로 만드세요.

• 사용자 인터랙션: useState, useEffect, onClick, onChange 등 사용자 이벤트 처리나 상태 관리가 필요할 때.

  // components/Counter.tsx
  'use client'; // 이 파일은 클라이언트에서 렌더링되어야 함을 명시해요.
  
  import { useState } from 'react';
  
  export default function Counter() {
    const [count, setCount] = useState(0);
  
    return (
      <div>
        <p>현재 카운트: {count}</p>
        <button onClick={() => setCount(count + 1)}>증가</button>
      </div>
    );
  }
  

• 브라우저 API 사용: window, document, localStorage 등 브라우저 환경에서만 접근 가능한 객체를 사용해야 할 때.
• 서드파티 라이브러리: 클라이언트 전용으로 설계된 라이브러리 (예: 특정 UI 컴포넌트 라이브러리, 차트 라이브러리 등)를 사용할 때.
• 폼 처리: 클라이언트에서 폼의 유효성 검사 및 제출 처리가 필요할 때.

Server Components와 Client Components의 결합

가장 이상적인 패턴은 Server Components 내부에 Client Components를 사용하는 것이에요. 이 과정에서 children prop을 활용하는 것이 중요해요.

Server Component는 Client Component를 직접 import할 수 없지만, Client Component를 prop으로 받아서 렌더링할 수 있어요.

// app/page.tsx (Server Component)
import dynamic from 'next/dynamic'; // Client Component를 Server Component에서 import 시 dynamic 사용 (SSR 제외)

// 'use client'가 붙은 Counter 컴포넌트를 import 해요.
// Server Component에서 직접 Client Component를 import하면 안 되지만,
// 이 경우에는 children으로 전달하거나, dynamic import로 SSR을 끈다면 가능해요.
// 여기서는 Server Component가 children으로 Client Component를 받는 방식을 보여드릴게요.

// components/ProductDetail.tsx (Server Component)
import FavoriteButton from '@/components/FavoriteButton'; // Client Component라고 가정해요.

interface ProductDetailProps {
  productId: string;
  productName: string;
  children: React.ReactNode; // Client Component를 children으로 받을 거예요.
}

export default async function ProductDetail({ productId, productName, children }: ProductDetailProps) {
  // 서버에서 상품 상세 정보를 가져오는 로직 (예시)
  const productInfo = await fetch(`https://api.example.com/products/${productId}`).then(res => res.json());

  return (
    <div>
      <h2>{productName}</h2>
      <p>{productInfo.description}</p>
      {/* Server Component는 FavoriteButton을 직접 import해서 사용하지 않고, children으로 받아서 렌더링해요. */}
      {children}
    </div>
  );
}

// app/products/[id]/page.tsx (Server Component)
import ProductDetail from '@/components/ProductDetail';
import FavoriteButton from '@/components/FavoriteButton'; // Client Component를 Server Component에서 import해요.

interface ProductPageProps {
  params: { id: string };
}

export default function ProductPage({ params }: ProductPageProps) {
  return (
    <ProductDetail productId={params.id} productName="예시 상품">
      {/* Client Component를 Server Component의 children으로 전달해요. */}
      <FavoriteButton productId={params.id} />
    </ProductDetail>
  );
}

// components/FavoriteButton.tsx (Client Component)
'use client';

import { useState } from 'react';

interface FavoriteButtonProps {
  productId: string;
}

export default function FavoriteButton({ productId }: FavoriteButtonProps) {
  const [isFavorited, setIsFavorited] = useState(false); // 클라이언트 상태 관리

  const toggleFavorite = () => {
    // API 호출 로직 등...
    setIsFavorited(!isFavorited);
    console.log(`Product ${productId} ${isFavorited ? 'unfavorited' : 'favorited'}`);
  };

  return (
    <button onClick={toggleFavorite}>
      {isFavorited ? '❤️ 즐겨찾기 해제' : '🤍 즐겨찾기 추가'}
    </button>
  );
}

위 예시에서 ProductPage는 Server Component이고, ProductDetail도 Server Component예요. FavoriteButton은 Client Component인데, ProductPage에서 FavoriteButton을 ProductDetail의 children으로 전달하는 방식으로 사용했어요. 이렇게 하면 ProductDetail Server Component는 Client Component의 자바스크립트 번들을 import하지 않고, 단지 서버에서 렌더링된 HTML에 Client Component의 placeholder를 포함시켜 클라이언트로 보내게 돼요. 클라이언트에서는 이 placeholder를 바탕으로 FavoriteButton 컴포넌트가 하이드레이션되고 인터랙티브하게 동작하게 되는 거죠.

🧪 예시

0️⃣ 코드/설정 예시

실제 사용 시나리오를 통해 Server Components와 Client Components의 조합을 더 명확하게 살펴볼게요.

Server Component (데이터 페칭 및 정적 UI)

PostList는 서버에서 게시글 목록을 가져와서 렌더링하는 Server Component예요. 여기서는 어떤 인터랙션도 필요 없으므로 "use client"를 붙이지 않아요.

// app/blog/page.tsx
import Link from 'next/link';

interface Post {
  id: string;
  title: string;
  author: string;
}

async function getPosts(): Promise<Post[]> {
  const res = await fetch('https://api.example.com/posts');
  if (!res.ok) {
    throw new Error('게시글을 불러오는데 실패했어요.');
  }
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <section>
      <h1>최신 게시글</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <Link href={`/blog/${post.id}`}>
              <h2>{post.title}</h2>
              <p>작성자: {post.author}</p>
            </Link>
          </li>
        ))}
      </ul>
    </section>
  );
}

Client Component (인터랙티브한 댓글 입력 폼)

CommentForm은 사용자가 댓글을 입력하고 제출하는 인터랙션이 필요해요. 따라서 useState와 이벤트 핸들러를 사용하므로 "use client"를 선언해요.

// components/CommentForm.tsx
'use client';

import { useState } from 'react';

interface CommentFormProps {
  postId: string;
  onCommentSubmitted: () => void; // 댓글 제출 후 콜백 함수
}

export default function CommentForm({ postId, onCommentSubmitted }: CommentFormProps) {
  const [comment, setComment] = useState('');
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    try {
      const res = await fetch(`/api/posts/${postId}/comments`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ comment }),
      });

      if (!res.ok) {
        throw new Error('댓글 제출에 실패했어요.');
      }
      setComment('');
      onCommentSubmitted(); // 부모 컴포넌트에 알림
    } catch (error) {
      console.error('댓글 제출 중 오류:', error);
      alert('댓글 제출 중 오류가 발생했어요.');
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <textarea
        value={comment}
        onChange={(e) => setComment(e.target.value)}
        placeholder="댓글을 작성해주세요..."
        rows={4}
        disabled={isSubmitting}
      />
      <button type="submit" disabled={isSubmitting}>
        {isSubmitting ? '댓글 작성 중...' : '댓글 작성'}
      </button>
    </form>
  );
}

Server Component 내부에 Client Component 사용

PostDetail Server Component는 게시글 내용을 서버에서 가져와 렌더링하고, 그 아래에 CommentForm Client Component를 배치해요.

// app/blog/[id]/page.tsx
import CommentForm from '@/components/CommentForm'; // Client Component를 import해요.
import { revalidatePath } from 'next/cache'; // ISR을 위한 revalidate 함수 (App Router)

interface Post {
  id: string;
  title: string;
  content: string;
}

async function getPost(id: string): Promise<Post> {
  const res = await fetch(`https://api.example.com/posts/${id}`);
  if (!res.ok) {
    throw new Error('게시글을 불러오는데 실패했어요.');
  }
  return res.json();
}

export default async function PostDetail({ params }: { params: { id: string } }) {
  const post = await getPost(params.id);

  const handleCommentSubmitted = () => {
    'use server'; // Server Action! 이 함수는 서버에서 실행돼요.
    // 댓글 제출 후 게시글 상세 페이지를 다시 렌더링하도록 유도
    revalidatePath(`/blog/${params.id}`);
    console.log('댓글이 성공적으로 제출되어 페이지를 다시 검증합니다.');
  };

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>

      <h3>댓글 달기</h3>
      {/* Server Component는 CommentForm Client Component를 렌더링해요. */}
      <CommentForm postId={params.id} onCommentSubmitted={handleCommentSubmitted} />
    </article>
  );
}

유용한 팁

Client Component의 prop으로 Server Component의 함수를 전달할 때는 "use server" 디렉티브를 사용하여 Server Action으로 만들어야 해요. 그렇지 않으면 클라이언트 컴포넌트 내부에서 서버 함수를 직접 호출할 수 없어요.

1️⃣ 적용 결과

위 예시에서 BlogPage와 PostDetail은 Server Components로 동작하여 초기 로딩 시 최소한의 자바스크립트만 전송되고, 검색 엔진에 친화적인 완전한 HTML을 제공해요. PostDetail 페이지에서 게시글 내용 자체는 서버에서 빠르게 렌더링되고, CommentForm이라는 인터랙티브한 부분만 Client Component로 클라이언트 번들에 포함되어 하이드레이션 과정을 거쳐요.

이러한 분리를 통해:

• 성능: 초기 로딩 속도가 향상되고, 클라이언트 번들 크기가 줄어들어 페이지 응답성이 좋아져요.
• 개발 경험: 개발자는 각 컴포넌트의 역할(데이터 & 정적 UI vs. 인터랙션)에 집중하여 더 명확하게 코드를 작성할 수 있어요.
• 보안: 민감한 서버 로직은 클라이언트에 노출되지 않고 안전하게 처리돼요.

📝 정리

0️⃣ 핵심 요약

Next.js App Router의 Server Components와 Client Components는 개발자가 웹 애플리케이션의 성능과 사용자 경험을 극대화할 수 있도록 돕는 강력한 도구예요.

• Server Components는 기본값이며, 데이터 페칭, 정적 UI 렌더링, 서버 로직 처리 및 번들 사이즈 최적화에 사용돼요. 클라이언트 자바스크립트 번들에 포함되지 않아 초기 로딩 속도와 SEO에 유리해요.
• Client Components는 "use client" 디렉티브로 선언하며, 사용자 인터랙션(useState, useEffect, 이벤트 핸들러), 브라우저 API 사용, 클라이언트 전용 라이브러리 연동에 필요해요.
• 가장 효율적인 방법은 Server Components를 기본으로 하고, 인터랙션이 필요한 부분만 Client Components로 분리하여 children prop 등을 통해 결합하는 것이에요. Client Component에 Server Component에서 온 함수를 props로 전달할 때는 "use server"로 Server Action을 만들어야 해요.

1️⃣ 다음 액션

이제 Server Components와 Client Components의 개념을 이해하셨으니, 다음 단계로 아래를 시도해 보는 것을 추천해요.

1. 기존 프로젝트 리팩토링: Next.js App Router를 사용하는 프로젝트가 있다면, 각 컴포넌트가 Server Component로 유지될 수 있는지, 아니면 "use client"가 필요한지 검토해 보세요.
2. 새로운 프로젝트 시작: App Router로 새 프로젝트를 시작하면서, 의식적으로 Server Component 우선 접근 방식을 적용해 보세요.
3. 데이터 페칭 전략 심화: Server Components에서의 데이터 페칭(캐싱, 재검증 등)에 대해 더 깊이 학습해 보세요. revalidatePath와 revalidateTag 같은 Server Action과 연계된 기능을 파악하는 것도 좋아요.

궁금한 점이 있다면 언제든지 관련 공식 문서를 참고하거나 직접 코드를 작성해 보면서 익숙해지는 것이 가장 좋은 방법이에요.

📮 참고

• Next.js 공식 문서: Server Components
  
• Next.js 공식 문서: Client Components
  
• Next.js 공식 문서: Server Actions

• Next.js
• Server Components
• Client Components
• App Router
• 성능 최적화
• 웹 개발

박상은

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

연관된 포스트

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
• Server Components
• Client Components
• App Router
• 성능 최적화

---



2026-03-15

단어: 1,310개

15분

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

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

• Next.js
• Server Components
• Client Components
• App Router
• 리액트