use client 와 use server [ Next.JS ]

use client

'use client'

...

• 파일의 최 상단에 입력시 하위 구성요소와 다른 모든 모듈이 번들의 일부로 들어가 CSR에 사용된다.

서버 컴포넌트

• nextjs에서 모든 컴포넌트는 기본적으로 서버 컴포넌트이다.
• 번들에 추가되지 않는다.
• Event Listener 사용 불가능
• Client Component 사용 불가능
• React Hook 사용 불가능
• async 로 정의 가능하다.
  • await / fetch 등으로 데이터를 가져올수 있다.

const ServerComponent = async () => {
	...
}

SSR과의 차이점

• SSR은 렌더링된 HTML을 가져오고, 서버 컴포넌트는 렌더링할 가상 객체를 가져온다.
• 객체는 서버컴포넌트와 클라이언트 컴포넌트로 구성되어 DOM 업데이트에 사용됨.