Next.js 14는 클라이언트 컴포넌트와 서버 컴포넌트라는 두 가지 새로운 컴포넌트 유형을 도입했습니다. 각 유형은 렌더링 방식, 사용 가능한 기능, 성능 및 SEO에 영향을 미치는 고유한 특성을 가지고 있습니다.

1. 렌더링 위치

• 클라이언트 컴포넌트: 클라이언트 브라우저에서 렌더링됩니다. JavaScript 번들이 다운로드된 후 실행되어 화면에 표시됩니다.

• 서버 컴포넌트: 서버에서 렌더링되어 HTML 형태로 클라이언트에 전송됩니다. 페이지 로딩 속도를 높이고 SEO에 도움이 됩니다.

2. 사용 가능한 라이브러리

• 클라이언트 컴포넌트: 모든 React 라이브러리 및 Hook을 사용할 수 있습니다.

• 서버 컴포넌트: 일부 React 라이브러리 및 Hook만 사용할 수 있습니다. useState와 같은 상태 관리 Hook은 사용할 수 없지만, getStaticProps와 같은 서버 측 함수를 사용할 수 있습니다.

3. 성능

• 클라이언트 컴포넌트: JavaScript 실행에 의존하기 때문에 서버 컴포넌트보다 느릴 수 있습니다.

• 서버 컴포넌트: 서버에서 렌더링되므로 초기 페이지 로딩 속도가 빨라집니다. 하지만, 클라이언트 상호 작용은 JavaScript를 통해 처리되어야 합니다.

4. 예시

• 클라이언트 컴포넌트: 버튼, 입력창, 드롭다운 메뉴와 같은 상호 작용적인 요소

• 서버 컴포넌트: 헤더, 푸터, 제품 목록과 같은 정적적인 요소

클라이언트 컴포넌트

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      클릭횟수: {count}
    </button>
  );
}

서버 컴포넌트

export default function MyHeader() {
  const { title } = getStaticProps();

  return (
    <header>
      <h1>{title}</h1>
    </header>
  );
}

export async function getStaticProps() {
  return {
    props: {
      title: "Next.js 14",
    },
  };
}