react 18 이상 환경에서 사용가능
https://velog.io/@asdf99245/Next.js-app-router-%EA%B3%B5%EC%8B%9D%EB%AC%B8%EC%84%9C-%EC%A0%95%EB%A6%AC
기존 react component vs server component
기존 react component
|
server component
|
| 모든 컴포넌트가 클라이언트(브라우저) 에서 렌더링 |
컴포넌트를 서버에서 렌더링하고 결과만 클라이언트로 전송 |
| javascript 번들이 클라이언트로 전송되어 실행됨 |
javascript 코드가 아닌 UI 표현만 전송됨 |
| 초기 로드 시간이 느릴 수 있음 ( 큰 JS 번들 다운로드 ) |
클라이언트 번들 사이즈 감소 및 초기 로드 시간 개선 |
주요 특징
- 서버에서만 실행되어, useState, useEffect 등 ui 상태 관련 hook 사용불가
- 브라우저 API 접근 불가
- 서버 리소스 직접 접근 가능 ( ex - 해당 서버 내의 DB 직접 접근 가능 )
- 서버 컴포넌트는 비동기 함수가 될 수 있음
- 이벤트 핸들러 사용 불가
- 클라이언트 컴포넌트를 자식으로 가질 수 있지만 클라이언트 컴포넌트의 자식은 무조건 클라이언트 컴포넌트여야함
동작 방식
- 요청 - 사용자가 서버에 페이지 요청
- 서버 렌더링 - 서버 컴포넌트를 서버에서 렌더링
- UI 직렬화 - react 컴포넌트 트리를 직렬화
- 클라이언트 전송 - UI 직렬화된 결과를 클라이언트에 전송
- 하이드레이션 - 클라이언트 컴포넌트만 하이드레이션 되어 유저 인터렉션 사용 가능해짐
장점
- 향상된 성능
- 번들 크기 감소: 서버 컴포넌트 js 코드는 클라이언트로 전송되지 않으므로 js 번들 크기가 감소됨
- 데이터 요청 감소: 서버에서 직접 DB에 접근하는 경우 요청 자체를 감소시켜 네트워크 데이터 리소스를 줄일수 있음
- 개선된 개발자 경험
- 서버와 클라이언트 코드 통합
- 백엔드 리소스에 직접 접근 가능
- 점진적 도입
- 기존 react component에 점진적으로 도입 가능
- 클라이언트와 서버 컴포넌트 혼합해서 사용가능
데이터 fetching 같은 비동기 처리가 포함되지 않은 컴포넌트의 경우에는 async function이 아닌 서버 컴포넌트도 존재할 수 있음 -> 유저 상호작용 등이 있는 경우를 제외하고는 서버 컴포넌트로 만들어서 번들 사이즈를 줄일 수 있음
