서버 컴포넌트 와 클라이언트 컴포넌트

서버 컴포넌트 (Server Components)

렌더링 위치: 서버에서 렌더링

 

데이터 페칭: 서버에서 직접 데이터베이스 또는 API와 상호작용하여 데이터를 가져올 수 있습니다.

( 데이터 페칭(Data Fetching)은 애플리케이션이 외부 소스로부터 데이터를 가져오는 과정을 의미 )

 

목적:  

초기 페이지 로드 속도를 높이고

서버 컴포넌트를 사용하면 초기 페이지 로드 속도를 높일 수 있습니다.

이는 서버에서 HTML을 미리 생성하여 클라이언트로 전송하기 때문에

SEO 친화적이며

서버에서 렌더링된 HTML을 검색 엔진( 검색 엔진 최적화(SEO)에 유리 )

봇이 쉽게 읽을 수 있기 때문입니다.

클라이언트 측에서 모든 것을 렌더링하는 경우,

검색 엔진 봇이 자바스크립트를 실행하지 못해 콘텐츠를 제대로 인덱싱하지 못할 수 있습니다.

서버 리소스를 활용하여 클라이언트에서 처리해야 할 로드를 줄입니다.

서버 컴포넌트를 사용하면 서버에서 많은 작업을 처리할 수 있으므로 클라이언트 측의 부담이 줄어듭니다.

- 서버: 데이터를 저장하고, 처리하며 클라이언트에 요청된 데이터를 전달하는 역할을 합니다.

데이터 페칭, 연산 수행, HTML 생성등

- 클라이언트: 브라우저 또는 애플리케이션으로, 사용자가 상호작용하는 인터페이스를 제공하고,

서버에서 받은 데이터를 표시합니다.

 

상태 관리: 클라이언트 측 상태 관리가 필요하지 않거나 최소화됩니다.

- 서버 컴포넌트는 서버에서 데이터를 관리하고, 필요한 데이터를 렌더링할 때 클라이언트로 전달

- 일반적으로, 클라이언트 측에서는 상태 관리를 위한 추가적인 로직이 필요합니다.

 

보안: 서버에서만 접근 가능한 데이터를 안전하게 처리할 수 있습니다.

 

호환성: React 서버 컴포넌트는 Next.js 같은 프레임워크와 함께 사용됩니다.

 

 

 

클라이언트 컴포넌트 (Client Components)

렌더링 위치: 클라이언트(브라우저)에서 렌더링

 

데이터 페칭: 클라이언트 측에서 fetch 또는 axios 같은 라이브러리를 사용하여

API 호출을 통해 데이터를 가져옵니다.

 

목적: 사용자와의 상호작용이 필요한 경우, 즉시 업데이트와 동적인 상태 관리를

필요로 하는 경우에 사용됩니다.

 

상태 관리: React의 useState, useReducer, Redux, Recoil  등 클라이언트 측 상태 관리 훅을 사용합니다.

 

보안: 클라이언트 측 코드이기 때문에 민감한 데이터 처리는 서버에서 하는 것이 좋습니다.

 

호환성: 전통적인 React 컴포넌트 방식으로 사용됩니다.