Next.js 14+에서는 **클라이언트 컴포넌트(use client)**와 **서버 컴포넌트(use server)**를 명확히 구분해야 합니다.

하지만 두 개념이 헷갈리기 쉽고, SSR과도 혼동되는 경우가 많습니다.

이번 글에서는 use client와 use server의 차이점을 정리하고, 언제 어떤 방식을 사용해야 하는지 실용적인 예제와 함께 살펴보겠습니다.

use client와 use server 각각 어떻게 사용할까?

use client 예제 (상태 관리, 이벤트 핸들링)

"use client";

import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increase</button>
    </div>
  );
}

✅ 특징

📌 언제 사용할까?