React Server Component?

이 글은 Next.js 의 앱라우터를 공부하며 작성한 글입니다.

사용되는 사진들은 인프런 한 입 크기로 잘라먹는 Next.js(15+) 에서 가져오게 되었습니다.

 

리액트 18버전에 추가된 새로운 유형의 컴포넌트이다.

 

오직 서버측에서만 실행되는 컴포넌트로 브라우저에서는 실행 안된다.

 

사용하기 이전에..

Page Router버전의 Next.js에서는 쓸대없이 js bundle이 커지는 문제가 있었다.

 

이를 앱 라우터를 사용하게 되면서 서버 컴포넌트와 클라이언트 컴포넌트로 나눠져 해결이 가능하게 되었다.

이처럼 나눠지게 된다.

서버 컴포넌트와 클라이언트 컴포넌트의 실행되는 타이밍을 보면

• 서버 컴포넌트 : 서버측에서 사전 렌더링을 진행할 때 딱 한번만 실행 됨
• 클라이언트 컴포넌트 : 사전 렌더링 진행할 때 한번, 하이드레이션 진행할 때 한번 총 2번 실행

공식문서에서 보면 

페이지의 대부분을 서버 컴포넌트로 구성하고

클라이언트 컴포넌트는 꼭 필요한 경우에만 사용할 것

이라고 나온다.

 

그리고 앱 라우터에서는 서버 컴포넌트를 따로 만들어 줄 필요가 없다.

기본적으로 앱 라우터에서는 모든 컴포넌트가 서버 컴포넌트로 동작하기 때문이다.

 

그렇기 때문에 만약

이런식으로 콘솔을 찍게 된다면 브라우저에서는 나오지 않게 된다.

서버에서만 돌아가기 때문이다.

그리고 여기서 useEffect같은 리액트 hook을 사용하게 되면 이는 클라이언트 컴포넌트에서만 사용 가능하므로 에러가 나오게 된다.

 

클라이언트 컴포넌트로 바꿔주려면 코드 최상단에

"use client"

를 적어주면 된다.

 

어떤게 서버 컴포넌트고 어떤게 클라이언트..?

아주 간단하다

상호작용이 있다면 → 클라이언트 컴포넌트

아니라면 전부 다 → 서버 컴포넌트

 

만약 링크가 있는데 이도 상호작용으로 생각할 수 있다.

하지만 아니다 이는 HTML 고유의 기능이기 때문이다.

 

즉, JS의 상호작용을 사용하냐 아니냐다.

예를들면 검색 input 등..

 

리액트 서버 컴포넌트 주의사항

주의사항이 4가지 있다

1. 서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안된다.
2. 클라이언트 컴포넌트는 클라이언트에서만 실행되지 않는다.
3. 클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다.
4. 서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가하다.

 

서버 컴포넌트에는 브라우저에서 실행될 코드가 포함되면 안된다.

useState나 useEffect같은 것이나 onClick 과 같은 헨들러는 서버 컴포넌트에서 사용 불가능하다.

브라우저에서 실행되는 기능을 담고 있는 라이브러리도 호출 불가

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

흐름이

서버에서 실행한 후 하이드레이션을 위해 클라이언트에서 실행하는 것 이기 때문에

서버 컴포넌트는 하이드레이션을 안하기 때문에 서버에서만.

클라이언트는 하이드레이션이 필요해 서버에서도 하고 클라이언트에서도 하는 두번인것이다.

클라이언트에서만 X

 

클라이언트 컴포넌트에서 서버 컴포넌트를 import 할 수 없다.

이런 경우 에러가 나는게 맞겠지만

Next.js가 자동으로 서버 컴포넌트를 클라이언트 컴포넌트로 바꿔준다.

자동으로 변경해주긴 하지만 최대한 피해라.

 

만약 꼭 클라이언트 안에 서버 컴포넌트가 필요하다면

import Client from "./client";
import styles from "./page.module.css";
import Server from "./server";

export default function Home() {
  return (
    <div className={styles.page}>
      인덱스 페이지
      <Client>
        <Server />
      </Client>
    </div>
  );
}

이런 방식으로 children을 이용해 주면 된다.

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

직렬화?

JS 함수는 직렬화가 불가능하다.

 

네비게이팅

페이지 이동은 Client Side Rendering 방식으로 처리된다.

(page Router 과 동일한 방식)

 

하지만 Server Component가 추가되어 방식이 조금 변경된다

페이지를 이동하게 되면

서버 컴포넌트로만 이루어져 있다면 rsc 페이로드만 이렇게 오게 되는데

만약 클라이언트 컴포넌트도 포함을 하고 있다면

이렇게 js bundle도 같이 오게 된다.

 

그리고 앱 라우터에서는 useRouter()을 불러올때 next/router이 아닌 next/navigation에서 불러와야 한다.