[Next.js + TS] use client, use server

리액트 서버(server) 컴포넌트들의 특징들

• 서버 컴포넌트들은 onClick 같은 상호작용성을 포함하지 않는다.
• fallback과 함수들은 props들로써 전달될 수 없다.
• 서버 컴포넌트들은 상호작용 하지 않으며, 그들은 React State가 필요가 없다.
• 서버 컴포넌트들은 리액트 Life Cycle Hooks들을 사용하지 않는다.
• 리액트 컴포넌트들을 백엔드부분이라고 생각하기 시작한다면 이해가 될것이다.
• 데이터베이스나, 파일 시스템에 기반한 작업들이나, life cycle hooks들이나 상호작용성이 없는 다른 컴포넌트들이 리액트 서버 컴포넌트들의 예시이다.

서버(server)컴포넌트들의 목적

서버 컴포넌트들의 중요한 이점들중 가장 큰 이점은, 서버컴포넌트들은 클라이언트 사이드 번들을 포함하지 않는다. 이것은 적은 양의 클라이언트 사이드 번들을 우리가 전달할 수 있도록 해서, 사용자가 적은 자바스크립트 코드들을 다운로드 하도록 한다. 이것은 너가 핸드폰 데이터 요금제를 사용하거나, 인터넷이 불안정한 도시에서 핸드폰을 사용할때 큰 도움을 준다.

클라이언트(client) 컴포넌트들의 특징들

• 클라이언트 컴포넌트들은 onClick 같은 상호작용성들을 포함한다.
• 클라이언트 컴포넌트들은 클라이언트라고 불리는 브라우저에서 렌더된다.
• 클라이언트 컴포넌트들은 "use client"라고 선언함으로써 그들이 클라이언트 컴포넌트인걸 나타낸다.
• 만약 useState, useEffect같은 리액트 lifecycle hooks들을 사용할 계획이 있다면, 그들은 클라이언트 컴포넌트들에서 사용해야한다.

리액트 서버 컴포넌트와 클라이언트 컴포넌트의 차이점

리액트 서버컴포넌트들은 서버에서 렌더되고 fetch되는 반면에, 클라이언트 컴포넌트들은 클라이언트쪽에서 렌더되고 fetch된다.
만약 lifecycle hooks같은 상호작용성을 포함하는 컴포넌트라면 그것을 클라이언트 컴포넌트로 만들자. 만약 그렇지 않다면 서버컴포넌트로 작성해라.

https://velog.io/@brgndy/React-Server-vs-Client-Component-in-Next.js-13-%ED%95%B4%EC%84%9D