[Next.js] Server Components

서버컴포넌트를 이용하여 data fetching 방식을 사용할 때의 장점

 

1. 클라이언트 단에서 돌아가지 않는 데이터베이스 및 api 등의 백엔드 서비스에 접근이 가능하다.

2. 보안 상 노출되면 안되는 키값들을 클라이언트 단에 드러나지 않게 할 수 있다.

3. data fetching 과 렌더링을 동일한 환경에서 수행할 수 있다.

4. 서버에 렌더링 캐싱이 가능하다.

5. 번들링할 자바스크립트 양이 줄어든다.

 

일반적으로 리액트에선 모든 작업이 클라이언트 단에서 이루어진다. Next.js 는 이러한 컴포넌트들을 서버에서 부분적으로 렌더링되는 페이지로 만들어서 클라이언트에서 모든 것을 부담하지 않아도 되게 개선하였다. 하지만 이 방식은 이렇게 서버단에서 생성된 HTML에 결국 클라이언트 단에서 hydrate 작업을 진행해야 한다는 것이다. 즉 추가적인 자바스크립트 코드가 필요하다는 의미다.

 

상황에 따라 서버 컴포넌트와 클라이언트 컴포넌트 중 더 적합한 것을 사용해야 한다.

Next.js에 따르면 우선 아래와 같은 기준을 두고, 가능한 경우 서버 컴포넌트로 만들고 따로 클라이언트 컴포넌트로 구현이 필요한 부분들만 추출하는 편이 좋다고 한다.

1. data fetching이 필요한 경우 → 서버 컴포넌트
2. 백엔드 자원에 접근해야 하는 경우 → 서버 컴포넌트
3. 클라이언트에 드러내면 안 되는 민감한 정보가 있을 때 → 서버 컴포넌트
4. 자바스크립트 코드를 줄여야 할 때 → 서버 컴포넌트
5. click, change 리스너 등을 사용하여 대화형(상호작용) 컨텐츠를 구현하려는 경우 → 클라이언트 컴포넌트
6. '상태(state)'을 활용하는 경우 → 클라이언트 컴포넌트
7. 브라우저 상에서만 지원하는 API(예: local storage와 같은 웹 스토리지를 다루는 API)를 사용하는 경우 → 클라이언트 컴포넌트