[NextJS] 서버 컴포넌트, 클라이언트 컴포넌트, SSR 차이점

NextJS에서는 13 버전이 업데이트되면서부터 모든 컴포넌트가 기본적으로 서버 컴포넌트다.

서버 컴포넌트와 클라이언트 컴포넌트가 있으며, 이를 잘 이해하고 사용하고 것이 중요할 것 같아 정리하게 되었다.

 

웹 애플리케이션을 렌더링할 수 있는 환경은 클라리언트와 서버가 있다.

 

 

 

서버 컴포넌트 -> 클라이언트 컴포넌트

서버 컴포넌트는 서버에서 실행되는 React 컴포넌트라고 볼 수 있다. 

 

NextJS에서는 기본적으로 컴포넌트를 만들 때 서버 컴포넌트로 동작된다. 도입부에 서버 컴포넌트와 클라이언트 컴포넌트의 차이를 설명한 공식문서에서 확인할 수 있듯, 서버 컴포넌트에서는 react lifeCycle을 가능하게 하는 useState, useEffect 같은 함수를 사용하지 못한다.

 

그렇기 때문에 클라이언트 컴포넌트라고 명시를 해줘야 한다.

클라이언트 컴포넌트라 명시하는 방법을 어렵지 않다. 코드 맨 위에 "use client"라고 작성하면 된다.

 

life cycle 함수 외에 onClick, onChange 같은 이벤트 함수, CSS in JS 스타일링도 제한된다. 그러므로 클라이언트 컴포넌트와 서버 컴포넌트를 통합하며 구분도 해주는 것이 좋다.

 

공식 문서에는 다음과 같이 서버 컴포넌트와 클라이언트 컴포넌트의 차이점을 구분해주고 있다.

 

 

❓왜 서버 컴포넌트를 쓰는데?

클라이언트 컴포넌트에 비해 서버 컴포넌트를 사용하면 어떠한 이점이 있을까?

 

1. 서버 컴포넌트를 통해 개발자는 서버 인프라를 더 잘 활용할 수 있다.

이전에는 클라이언트의 자바스크립트 번들 크기에 영향을 주었던 큰 종속성들을 완전히 서버에 유지할 수 있으므로 성능이 향상된다. 이로써 React의 강력함과 유연성, 그리고 컴포넌트 기반 UI 템플릿 모델을 함께 제공한다.

 

2. 초기 페이지 로드 속도 증가 및 클라이언트 측 자바스크립트 번들 크기 감소

baseclient-side 런타임이 cachealbe해지며 크기도 예측 가능하다. 이는 애플리케이션 규모가 커져도 증가하지 않는다.

 

3. Next.js로 라우트가 로드되면 초기 HTML이 서버에서 렌더링 된다.

그런 다음 HTML은 브라우저에서 점진적으로 향상되어 클라이언트가 Next.js 및  React 클라이언트 측 런타임을 비동기식으로 로드하여 애플리케이션을 인계하고 상호 작용을 추가할 수 있다. 

 

 

❓그럼 컴포넌트 구성은 어떻게 하는 게 좋을까?

 

서버 컴포넌트

- 데이터 fetch 할 경우

- 백엔드 데이터에 직접 접근

- 민감한 정보 access token, api key 등 보관

- 서버에 대한 큰 의존성 유지 / 클라이언트 측 JavaScript 감소

 

클라이언트 컴포넌트

- 상호작용 및 이벤트 리스너(onClick(), onChange()) 사용

- 상태 및 수명주기 효과 사용(useState(), useReducer(), useEffect()) 등

- 브라우저 전용 API 사용

- 상태, 효과 또는 브라우저 전용 API에 따라 달라지는 custom hooks

 

 

❓SSR 그리고 서버 컴포넌트 차이점

 

서버 컴포넌트에 대해서 알아보다 보면,

서버에서 렌더링 된다는 점이 SSR과 유사하다는 것을 알게 되는데, 나 또한 이 부분이 궁금해서 알아보았다.

 

우선 가장 큰 차이점은

SSR은 서버에서 렌더링 된 HTML을 가져오지만,

서버 컴포넌트는 HTML이 아닌 렌더링 할 트리 객체를 가져온다는 점이다.

 

트리 객체는 서버 컴포넌트, 클라이언트 컴포넌트로 구성되어 있으며 트리를 보고 DOM을 업데이트한다고 한다. 

 

Building Your Application: Rendering | Next.js