• React 18v 부터 새롭게 추가됨
• 서버측에서만 실행되는 컴포넌트 (브라우저 실행 ❌)

등장 배경

Page Router 단점

컴포넌트는 총 두번 실행됨

• 서버에서 js 실행(사전 렌더링)
• 이후 하이드레이션을 위해 컴포넌트 또 실행

인덱스페이지에 북 컴포넌트는 상호작용이 필요없는 컴포넌트로

👆 이때 딱 한번만 실행되어 HTML로 변환이 되기만 하면 그 다음부턴 할일이 없는, 즉 브라우저에서 하이드레이션이 필요없는 컴포넌트들인데

👆 page router는 모든 컴포넌트들을 하이드레이션을 위해 두번 JS를 실행하기때문에 불필요함 => JS 번들의 용량이 커짐

이러한 단점들을 보완한게 App Router의 리액트 서버 컴포넌트로, 앞서 소개한 북 컴포넌트처럼 상호작용 없는 컴포넌트를 서버 컴포넌트로서 따로 개발 가능하다. 즉 넥스트 서버측에서 사전렌더링 진행할때 그때 딱 한번만 실행되고, 하이드레이션을위한 자바스크립트 번들에는 최종적으로 포함되지 않도록 설정해줄수있다.

Next.js 공식문서에서 대부분을 서버 컴포넌트로 구성을 권장
꼭 필요한 경우에만 클라이언트 컴포넌트로 구현

실습

기본적으로 app router에서는 모든 컴포넌트가 서버컴포넌트임 => 터미널에서 콘솔창확인가능

export default function Home() {
  console.log("나는 서버에서 실행됨");
  return <div className={styles.page}>인덱스 페이지</div>;
}

그래서 useEffect처럼 브라우저 측에서 실행가능한 리액트 훅스는 호출하면 에러뜸
서버 컴포넌트를 클라이언트 컴포넌트(서버측 실행 + 브라우저 측 실행)로 바꾸려면 => "use client" 사용

예를들어 서치바는 js 인터랙션이 필요하므로 클라이언트 컴포넌트이다. 'use client'를 사용해서 서치바 컴포넌트를 만들고, 다른 페이지 컴포넌트에서 불러오면된다.

주의사항

2번.클라이언트 컴포넌트는 클라이언트에서만 실행되지 않는다.

3번. 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다 => children 사용

당연히 서버 컴포넌트는 브라우저에서 실행이 안되니까 클라이언트 컴포넌트는 서버컴포넌트를 불러오면 좋지않다. 하지만 Next.js 에서는 오류를 내뿜기보다 서버컴포넌트를 자동으로 클라이언트 컴포넌트로 변경한다

❤️‍🔥 만약 어쩔수없이 불러와야한다!라는 상황이라면 children을 이용하자 ❤️‍🔥

왜냐면 서버컴포넌트를 children 으로 넘겨주는 경우, Next.js 는 해당 컴포넌트를 클라이언트 컴포넌트로 변경하지않는다.

4번. 서버 컴포넌트는 클라이언트 컴포넌트에게 직렬화되지않는 props는 전달 불가하다

런타임 에러 발생함

직렬화란?👇👇