서버 컴포넌트 (RSC, React Server Component)

 

서버 컴포넌트 (RSC, React Server Component)

 

Next.js 13의 최근 릴리즈된 버전에서는 서버 컴포넌트(RSC)를 사용할 수 있다. 서버 컴포넌트란, 서버에서 실행되고 클라이언트로 JSX 파일을 전달하는 컴포넌트를 말한다. 서버 컴포넌트는 페이지의 골격(스켈레톤)을 렌더링하는 데 유용하고, 데이터를 서버에서 fetching해서 가져오는 데 유용하다. 이번에 릴리즈된 Next.js에서는 서버 컴포넌트를 app 디렉토리의 기본 타입으로 채택하고 있다.

 

 

서버 컴포넌트 & 클라이언트 컴포넌트의 혼합 구조

출처: Next.js 공식 문서

위 화면을 보면, 서버 컴포넌트와 클라이언트 컴포넌트를 혼합한 하이브리드형 페이지가 뭔지 살펴볼 수 있다.

사용자와 상호작용을 하는 검색, 버튼 등은 Client Component로, 그 외 상호작용이 필요 없는 부분은 Server Component로 처리할 수 있다. 

 

 

 

 

서버 컴포넌트 사용의 이점

 

페이지 로딩 시간 감축

 

서버 컴포넌트의 이점은 다양하다. 우선, 서버 컴포넌트를 통해 클라이언트에 부담을 줄여 페이지 로딩 시간을 감축시킬 수 있다.  JavaScript 번들 사이즈에 영향을 미치는 거대한 dependency들을 서버에서만 사용할 수 있기 때문이다. 이를 통해 클라이언트에 전송되는 Javasript 번들 크기를 줄이고, 초기 페이지 로딩 시간을 감축시킬 수 있다. 또한 상호작용적인 부분만 클라이언트 컴포넌트로 남기면서 추가적인 Javascript 생성을 줄일 수 있다.

 

 

 

DB 접속을 통한 데이터 수집

 

서버 컴포넌트는 DB에 직접 접속해서 데이터를 가져오는 이점도 가지고 있다. 또한 이렇게 가져온 데이터를 서버 컴포넌트 간에 공유할 수 있기도 하다. 예시를 보면 다음과 같다.

// utility/database.ts

export const db = new DatabaseConnection();

유틸리티에서 DB 연결 함수를 생성한다.

 

// app/users/layout.tsx

import { db } from '@utils/database';

export async function UsersLayout() {
	let users = await db.query();
    // ..
}

레이아웃 파일에서 @utils/database 모듈을 import해서 DB에 액세스할 수 있도록 한다. 이에 맞는 query를 만들어서 데이터를 가져온다.

 

// app/users/[id]/page.tsx

import { db } from '@utils/database';

export async function DashboardPage(){
	let user = await db.query();
    //...
}

페이지 파일에서도 동일한 방법으로 DB 데이터를 가져온다.

 

 

Fetch된 데이터 공유

 

다음과 같이 같은 폴더 안에 있는 Server Component의 경우, fetch된 데이터를 서로 공유할 수 있다. 따라서 컴포넌트마다 여러 번 fetch 요청을 하거나 props로 넘겨줄 필요 없이 한 번 fetch된 데이터를 계속 사용할 수 있다. Next.js가 fetch 캐시로부터 계속 동일한 값을 읽기 때문이다.

 

 

 

 

 

서버 컴포넌트 사용의 제약점 

페이지 로딩 시간을 줄이고, JS 번들 크기를 줄이는 장점이 있지만 여러 가지 제약점도 존재한다. 브라우저에서만 사용 가능한 API는 사용할 수 없고, useState나 useEffect와 같은 React hooks도 사용할 수 없다. 하지만 Client Component와 혼합 사용이 가능하기 때문에, 이를 고려해서 하이브리드형 페이지를 구축하면 각 장점을 활용할 수 있을 것으로 보인다.

 

 

 

Reference

https://nextjs.org/docs/getting-started/react-essentials#when-to-use-server-and-client-components

https://makerkit.dev/blog/tutorials/nextjs13