Next.js 공식문서 참고.
https://nextjs.org/docs/getting-started/react-essentials
server componets
Next.js 13 의 app 디렉토리 안에 있는 모든 컴포넌트들은 기본적으로 server component이다. 추가적인 작업없이 자동적으로 server component가 된다.
'use client' 지시문을 사용하여 선택적으로 클라이언트 컴포넌트를 활용할 수도 있다.
왜 서버 컴포넌트를 사용하는가
서버 컴포넌트를 사용하면 개발자는 서버 인프라를 더 효과적으로 활용할 수 있다.
예를 들어, 데이터를 서버에서 가져와 데이터베이스에 가까운 위치에서 처리하고, 이전에 클라이언트 JavaScript 번들 크기에 영향을 미치던 큰 종속성을 서버에 유지하여 성능을 향상시킬 수 있다. 서버 컴포넌트를 사용하면 React 애플리케이션을 작성하는 데 PHP나 Ruby on Rails와 유사한 느낌을 제공하지만, React와 컴포넌트 모델의 강력함과 유연성을 동시에 활용할 수 있다.
서버 컴포넌트를 사용하면 초기 페이지 로드가 더 빠르고, 클라이언트 측 JavaScript 번들 크기가 줄어든다. 기본 클라이언트 측 런타임은 캐시 가능하며 크기가 예측 가능하며, 애플리케이션이 커져도 증가하지 않는다. 추가적인 JavaScript는 클라이언트 컴포넌트를 통해 애플리케이션에서 클라이언트 측 상호작용이 사용될 때만 추가됨.
Next.js에서 경로(route)를 로드할 때 초기 HTML이 서버에서 렌더링한다. 그런 다음 이 HTML은 브라우저에서 점진적으로 향상되어 클라이언트가 애플리케이션을 인식하고, Next.js 및 React 클라이언트 측 런타임을 비동기적으로 로드함으로써 상호작용성을 추가한다.
client components
작은 인터랙티브 UI 조각들에는 Client Components를 조합할 수 있다.
클라이언트 컴포넌트를 사용하면 초기 로딩 속도를 향상시키고, 사용자가 페이지와 상호작용할 때 추가적인 인터랙티브 요소를 동적으로 로드할 수 있다.
초기 렌더링의 빠른 속도와 동시에 클라이언트에서 추가적인 상호작용성을 구현할 수 있는 장점이 있다.
클라이언트 컴포넌트를 사용하고 싶다면 파일의 최상단에 'use client'를 적어주면 된다.
app/ 디렉토리에 위치할 필요 없이 클라이언트 컴포넌트는 아무 위치에나 존재할 수 있다. app/ 디렉토리 page들과 서로 결합해서 사용할 수도 있다.
클라이언트 컴포넌트와 서버컴포넌트를 언제 쓰는가?
Server Components와 Client Components를 사용하면 개발자는 서버와 클라이언트를 아우르는 애플리케이션을 구축할 수 있으며, 클라이언트 측 앱의 풍부한 상호작용성과 전통적인 서버 렌더링의 개선된 성능을 결합할 수 있다.
