Server Component
서버 컴포넌트는 리액트의 서버 컴포넌트를 의미합니다. 서버 컴포넌트란 서버에서 UI가 그려지는 컴포넌트를 말하며 캐싱도 지원됩니다. 넥스트에서 컴포넌트는 모두 기본적으로 서버 컴포넌트입니다.
서버 컴포넌트의 장점
넥스트 공식 문서에 열거된 장점들은 다음과 같습니다.
- 데이터 호출시 네트워크 비용 감소
- 보안 강화
- 캐싱
- 저사양기기까지 고려한 성능 이점
- 초기 페이지 로딩 속도 향상
- SEO와 SNS 프리뷰(OG 태그)
- 스트리밍 UI - TODO: 추가 예정
서버 컴포넌트는 어떻게 그려질까?
서버 컴포넌트의 렌더링 과정입니다.
서버 렌더링 방식 3가지
서버에서 페이지를 그리는 방식은 크게 3가지가 있습니다.
- 정적
- 동적
- 스트리밍
정적 렌더링(기본 동작)
정적 렌더링은 애플리케이션 빌드 타임에 서버에서 화면이 그려지는 방식입니다. 렌더링 결과는 CDN 서버를 통해 제공되고 캐싱되는 장점이 있습니다. 이 방식은 사용자의 정보가 들어가지 않는 블로그나 상품 소개 페이지 등에 적합합니다.
동적 렌더링
동적 렌더링이란 클라이언트로부터 서버에 요청이 들어올 때마다 서버에서 화면을 그리는 방식입니다. 이 방식은 요청에 쿠키나, 권한 같은 정보가 담겨 있어 요청을 했을 때만 UI를 결정할 수 있을 때 사용합니다.
동적 렌더링에서 알아두면 좋은 점이 하나 있습니다. 서버에서 화면을 그릴 때 만약 클라이언트에서 받은 요청이 캐싱되어 있고, cookies(), searchParams와 같은 동적 함수가 없다면 정적 렌더링을 진행합니다. 그렇지 않고 캐싱되어 있지 않거나 동적 함수가 있다면 서버 렌더링을 진행하는 중에 동적 렌더링으로 전환됩니다. 자세한 내용은 아래 표를 참고하세요.
| Dynamic Functions(동적 함수) | Data | Route |
|---|---|---|
| No | Cached | Statically Rendered(정적 렌더링) |
| Yes | Cached | Dynamically Rendered(동적 렌더링) |
| No | Not Cached | Dynamically Rendered |
| Yes | Not Cached | Dynamically Rendered |
위 표를 기준했을 때 특정 페이지가 동적으로 그려졌지만 어떤 데이터는 캐싱이 되어 있고 어떤 데이터는 캐싱이 안되어 있을 수 있습니다. 참고로, 개발자 입장에서는 이 페이지가 동적 렌더링이냐 정적 렌더링이냐를 고민할 필요가 없습니다. 위 표를 기준으로 넥스트가 알아서 지정해 주기 때문입니다.
참고 : 동적 함수(Dynamic Function)란 쿠키, 헤더, 쿼리 파라미터 등 요청 시점에만 알 수 있는 정보를 다루는 함수를 말합니다.
스트리밍
스트리밍은 특정 페이지의 UI를 청크 단위로 구분하여 클라이언트로 보낸 후 여러 영역을 동시에 그리는 방식입니다. 페이지 하나를 큰 청크로 보내는게 아니라 페이지 UI 별로 작은 청크로 나눠 전송하여 수신함으로써 클라이언트에서 그릴 수 있는 시점을 앞당깁니다. 그래서 초기 로딩 속도가 더 빨라지고 느린 데이터 호출 때문에 페이지가 오랫동안 빈 화면이 되는 상황을 피할 수 있습니다.
