Next.js 서버 컴포넌트 & 클라이언트 컴포넌트

Next.js 13은 React 기반의 웹 애플리케이션 프레임워크로, 2022년 10월에 출시되었습니다. 이 버전은 성능 향상과 개발자 경험 개선을 목표로 여러 새로운 기능을 도입했습니다.

배경:

1. 서버 사이드 렌더링(SSR)과 정적 사이트 생성(SSG)의 장점을 결합
2. React 18의 새로운 기능을 최대한 활용
3. 웹 애플리케이션의 성능과 사용자 경험 향상 필요성

Next.js 13 이상의 App Router에서는 기본적으로 모든 컴포넌트가 서버 컴포넌트로 취급됩니다. 필요에 따라 클라이언트 컴포넌트를 사용하여 동적 기능을 구현하고, 서버 컴포넌트와 클라이언트 컴포넌트를 적절히 조합하여 성능과 사용자 경험을 최적화할 수 있습니다.

 

서버 컴포넌트:

1. 레이아웃 (layout.js)
   • 페이지 간 공통 UI를 정의
   • 서버에서 렌더링되어 성능 최적화
2. 페이지 (page.js)
   • 라우트의 고유한 UI를 정의
   • 기본적으로 서버 컴포넌트로 동작
3. 데이터 페칭 컴포넌트
   • fetch API를 사용한 데이터 로딩
   • 서버에서 실행되어 클라이언트로 데이터 전송
4. 메타데이터 컴포넌트
   • SEO를 위한 메타 정보 정의
   • 서버에서 생성되어 초기 HTML에 포함
5. 정적 생성 컴포넌트
   • getStaticProps, getStaticPaths를 사용하는 컴포넌트
   • 빌드 시 생성되어 서버에서 제공

클라이언트 컴포넌트:

1. 인터랙티브 UI 컴포넌트
   • 'use client' 지시어로 정의
   • 사용자 상호작용이 필요한 요소 (버튼, 폼 등)
2. 상태 관리 컴포넌트
   • React 훅(useState, useReducer 등)을 사용하는 컴포넌트
   • 클라이언트 측 상태를 관리
3. 이벤트 핸들러 컴포넌트
   • onClick, onChange 등의 이벤트를 처리하는 컴포넌트
   • 사용자 입력에 반응하는 UI 요소
4. 애니메이션 컴포넌트
   • CSS 애니메이션이나 JavaScript 기반 애니메이션을 사용하는 컴포넌트
   • 클라이언트에서 실행되어 부드러운 전환 효과 제공
5. 클라이언트 측 라우팅 컴포넌트
   • Link 컴포넌트나 useRouter 훅을 사용하는 네비게이션 요소
   • 클라이언트 측 라우팅을 통해 빠른 페이지 전환 제공
6. 외부 라이브러리 통합 컴포넌트
   • 차트, 지도 등 클라이언트 측 렌더링이 필요한 외부 라이브러리를 사용하는 컴포넌트

이러한 구분을 통해 Next.js 13에서는 서버 컴포넌트와 클라이언트 컴포넌트를 효과적으로 조합하여 성능과 사용자 경험을 최적화할 수 있습니다.