서버컴포넌트? 클라이언트 컴포넌트?
서버 컴포넌트
서버 컴포넌트는 사전 렌더링(Pre-rendering) 시 단 한 번만 실행됩니다.
- 실행 시점: 사전 렌더링 단계에서만 실행되어, 브라우저로 전달되는 최종 HTML에 영향을 줌.
- 특징: 렌더링 로직이 서버에서 수행되므로 클라이언트에 불필요한 JavaScript 코드가 전달되지 않아 초기 로딩 속도와 성능 개선에 크게 기여함.
- 적용 범위: Next.js의 app router를 사용하면 기본적으로 모든 컴포넌트가 서버 컴포넌트로 동작.
클라이언트 컴포넌트
클라이언트 컴포넌트는 사전 렌더링 단계와 하이드레이션 단계에서 각각 한 번씩 총 2번 실행됩니다.
- 실행 시점: 사전 렌더링 할 때 1회 실행 + 하이드레이션을 위해 추가로 1회 실행
- 사용 권장 사항: 페이지의 대부분은 서버 컴포넌트로 구성하고, 클라이언트 컴포넌트는 반드시 필요한 경우에만 사용하도록 공식적으로 권장됨.
- 효과: 불필요한 클라이언트와 JavaScript를 줄여, 최종 번들 크기와 로딩 속도를 최적화 할 수 있음.
!!✋ React Server Component 주의 사항
1. 서버 컴포넌트에는 브라우저 전용 코드 포함 금지
서버에서 실행되는 컴포넌트에서 브라우저 API(window, document 등)를 호출하는 코드를 넣으면 안됩니다. 이는 실행 환경의 차이로 인해 오류가 발생할 수 있기 때문입니다.
2. 클라이언트 컴포넌트의 실행 환경
클라이언트 컴포넌트가 오직 클라이언트에서만 실행되지 않는다는 점을 기억해야 합니다. 사전 렌더링 단계에서도 한 번 실행되므로, 이 중복 실행에 따른 부작용이 없는지 확인해야 합니다.
3. 서버 컴포넌트와 클라이언트 컴포넌트 간의 의존성 주의
서버 컴포넌트 내에서 클라이언트 컴포넌트를 import 하는 것은 허용됩니다.
그러나 클라이언트 컴포넌트에서 서버 컴포넌트를 import 하는 것은 금지되어 있습니다. Next.js에서는 만약 이러한 상황이 발생하면 자동으로 서버 컴포넌트를 클라이언트 컴포넌트로 변환시켜줍니다.
불가피하게 클라이언트 컴포넌트에서 서버 컴포넌트를 사용해야 한다면, 직접 import 하지 않고, children으로 받아 렌더링하여 Next.js가 자동 변환을 하지 않도록 해야 합니다.
4. 직렬화 불가능한 Props 전달 문제
서버 컴포넌트에서 클라이언트 컴포넌트로 전달되는 Props는 반드시 직렬화 가능해야 합니다.
예를 들어, JavaScript의 함수와 같이 직렬화가 불가능한 값은 Props로 전달할 수 없습니다.
🤔직렬화가 뭔데?
객체, 배열, 클래스 등 복잡한 데이터 구조를 네트워크 전송이나 저장이 가능하도록 단순한 형태(문자열, 바이트 등)로 변환하는 작업입니다.
const person = {
name: '김현중',
age: 17,
}위의 객체가 직렬화되면 아래와 같이 변환됩니다.
{'name': '김현중', 'age': 17}🤸♂️RSC Payload란?
사전 렌더링이 진행될 때 RSC만 따로 먼저 실행되며, 이 때 RSC Payload라는 데이터를 생성합니다. 이는 다음과 같은 역할을 수행합니다.
서버 컴포넌트 렌더링 결과 저장
서버 컴포넌트의 순수한 데이터가 담기며, HTML 최종 출력에 필요한 정보가 포함됩니다.
클라이언트 컴포넌트와의 통합
사전 렌더링된 RSC Payload와 클라이언트 컴포넌트가 합쳐져서 완성된 HTML 페이지가 만들어집니다. 이를 통해 서버에서 가져온 데이터를 클라이언트에서 동적으로 사용할 수 있는 장점을 제공합니다.
데이터 구성 요소
-
서버 컴포넌트의 렌더링 결과
-
연결된 클라이언트 컴포넌트의 위치 정보
-
클라이언트 컴포넌트에게 전달하는 Props 값
이러한 구조 덕분에 서버와 클라이언트 간의 효율적인 데이터 전달과 최적화된 렌더링이 가능해집니다.
결론
React Server Component를 활용하면 서버 측에서 렌더링 작업을 대부분 처리하고, 클라이언트에서는 최소한의 JavaScript만 실행되도록 최적화 할 수 있습니다. 이를 통해 초기 로딩 속도와 SEO 성능까지 향상할 수 있다는 이점이 있습니다.
