JS)next.js- Server/Client Component

Rendering Environments

어플리케이션 코드를 렌더링할 수 있는 환경에는 두 가지 환경이 있다. 바로 클라이언트와 서버이다.

• client
  어플리케이션 코드에 대한 요청을 서버로 보내는 유저 디바이스의 브라우저를 말한다.
  그런 다음 서버의 응답을 사용자가 상호 작용할 수 있는 인터페이스로 변환한다.
• server
  서버는 어플리케이션 코드를 저장하고, 클라이언트의 요청을 수신하고, 일부 computation을 수행한 후 적절한 응답을 보내는 data center의 컴퓨터를 말한다.

 

Next.js - Server/Client Component

React 18 버전 이전까지는 React를 사용하여 어플리케이션을 렌더링하는 주요한 방법이 전적으로 클라이언트에 있었다.

Next.js는 HTML을 생성하고 React에 의해 hydrated 되도록 클라이언트에 전송함으로써 어플리케이션을 pages로 나누고 서버에서 prerender하는 더 쉬운 방법을 제공했다. 하지만, 이것은 initial HTML을 인터랙티브하게 만들기 위해서 추가적인 JavaScript를 필요로 하게 만들었다.

그러나, 이제부터는 서버 컴포넌트 및 클라이언트 컴포넌트를 사용하여 클라이언트 또는 서버에서 React를 렌더링할 수 있게 되었다. 즉, 이제부터는 컴포넌트 수준에서도 렌더링 환경를 선택할 수 있게 된 것이다.

 

Next.js 공식 문서를 보면 Server/Client Component를 각각 언제 사용하는지 명확히 구분해주고 있다.

- Server Component는 토큰, API 등과 같은 서버 자원과 관련한 컴포넌트로, Server Component를 사용하면, 클라이언트로 보내는 Javascript를 줄일 수 있어서 페이지 로드를 빠르게 해준다.
- Client Component는 클릭과 변경, useEffect(), useState() 등과 같은 사용자의 영향을 받는 컴포넌트다.

 

Failed to Compile

Server Component에서 useRef()와 같은 React Hooks을 호출하면서 컴파일 에러가 발생한다.
에러 메세지를 보면 use Client를 사용하라고 한다.

 

Next.js 13버전은 /app 디렉토리 내의 모든 컴포넌트는 Server Component로 렌더링된다고 한다.
따라서 클라이언트에서 사용하려면 "use client"를 명시적으로 선언해줘야 한다.

 

 

출처 : https://velog.io/@timosean/Server-component-vs.-Client-Component