CRA(create react app)이나 Vite의 도움을 받아 만드는 모든 바닐라 리액트 앱들에서 기본적으로 클라이언트 컴포넌트를 사용하고 있다. 왜냐하면 CRA나 Vite로 만든 리액트 앱에서 React.js는 순수한 클라이언트 사이드 라이브러리로 브라우저에서 클라이언트 측에서 코드를 실행한다.
NextJS에서는 이것이 변경되는데, 왜냐하면 NextJS는 풀스택 프레임워크이기 때문이다. NextJS에서 갖고 있는 모든 리액트 컴포넌트들은 오직 서버에서만 렌더링된다. 이것이 바로 Next가 리액트 서버 컴포넌트라 불리는 이유다.
서버 컴포넌트를 사용하면 좋은점
- 다운로드해야하는 클라이언트 측의 자바스크립트 코드가 줄어들 수 있어 웹사이트의 성능을 향상시킬 수 있다.
- 검색엔진 최적화에도 좋다. 웹 검색 크롤러들은 이제 완성 컨텐츠를 포함하는 페이지들을 볼 수 있기 때문이다.
일반적인 자바스크립트
페이지의 소스코드를 보면 본질적으로 비어있다. 왜냐하면 모든 내용은 클라이언트 측 코드와 클라이언트 측 컴포넌트의 도움으로 클라이언트 측에서 생성되고 채워지기 때문이다.
그러나 NextJS 프로젝트에서 클라이언트 컴포넌트도 만들 수 있다.
그것들은 기술적으로 서버에서 아직 사전 렌더링되는 것들이고 잠재적으로는 클라이언트에 렌더링될 수 있다. 이 컴포넌트들은 클라이언트에 무조건 렌더링되어야 하는 것이다. 클라이언트에만 사용가능한 코드나 기능을 포함하기 때문이다.(useState 훅, useEffect 훅, eventHandler) 이 훅들은 서버 측에서 사용 불가한데 NextJS에 클라이언트 컴포넌트를 만들고 싶다면 NextJS에게 컴포넌트를 잡고 있는 파일 위에 useClient 지시어를 사용하면 된다.
'use client';
import ...