Server Component

React Sever Component (이하 RSC)는 React 18부터 도입된 개념이다. 서버에서 동작하는 컴포넌트를 말한다. Next 13의 app directory에서 작성하는 Component는 기본적으로 Server Component이다.

 

 

RSC의 동작 방식

이제 React tree에는 RSC, RCC 가 적절하게 분배되어 사용될 것이다.

 

(출처 : https://www.plasmic.app/blog/how-react-server-components-work#what-are-react-server-components )

 

브라우저에서 해당 페이지에 대한 요청을 하면 React Tree의 root부터 실행하며 직렬화된 JSON 형태로 재구성한다. 모든 Component에 대해서 이 작업이 이뤄지는 것이 아니라 RSC에 한에서만 진행이 되고 RCC는 placeholder를 남기고 건너뛰게 된다.

 

 

직렬화 이후의 상태를 보면 다음과 같다.

(출처 : https://www.plasmic.app/blog/how-react-server-components-work#what-are-react-server-components )

 

이 결과물을 클라이언트(브라우저)가 전달받게 되고 JS Bundle을 참조하여 RCC를 클라이언트 사이드에서 생성한다.

 

 

제약 사항

위에서 설명한 동작방식에 따라 제약 사항이 존재한다.

1. Server Component에서 함수를 Props로 넘길 수 없다.
   • Server Component는 직렬화 과정을 거치는데 함수는 직렬화가 불가능하기 때문이다.
2. Client Component에서 Server Component를 직접 리턴할 수 없다.
   • 부모가 Client Component 일 때 자식인 Server Component는 서버에서 실행될 수 없어서 Client Component 처럼 동작하게 된다.

 

Next 13 RSC 장점

1. Data Fetching에 유리하다.

• 동일한 api에 대해 자동으로 캐싱을 제공한다. (fetch api의 기본값이 캐싱을 제공한다. SSG 방식이다.)
• waterfall을 줄일 수 있다. (지연) 
• 클라이언트에서 데이터를 관리할 필요가 없어서 보안에 유리하다.

fetch('https://...') // cache: 'force-cache' 가 기본값, SSG
fetch('https://...', { next: { revalidate: 10 } }) // ISR
fetch('https://...', { cache: 'no-store' }) // SSR

2.  백엔드 리소스에 직접 접근 가능하다.

 

3. Zero Bundle Size

• RSC는 서버에서 실행된 후 직렬화된 JSON 형태로 전달되기 떄문에 bundle이 필요하지 않다. RSC에서만 사용되는 외부 라이브러리의 경우에도 bundle에 포함될 필요가 없다.