[Next.JS] 서버 컴포넌트

Simon·2024년 5월 22일

Next.js에서는 컴포넌트를 크게 서버 컴포넌트와 클라이언트 두 가지로 다룬다. 공식 문서를 보며 내용을 정리해보겠다.

서버 컴포넌트

리액트 서버 컴포넌트를 사용하면 서버에서 렌더링하고 선택적으로 캐싱할 수 있는 UI를 작성할 수 있다고 한다. Next.js에서는 렌더링 작업이 경로 세그먼트 별로 나뉘어져 스트리밍 및 부분 렌더링이 가능하다고 한다. 다음과 같은 세가지 서버 렌더링 방법이 있다.

정적 렌더링 (Static Rendering)
동적 렌더링 (Dynamic Rendering)
스트리밍 (Streaming)

서버 렌더링의 이점

Data Fetching: 서버 컴포넌트를 사용하면 가져오는(feching) 데이터를 데이터 자원에 더 가까운 서버로 이동할 수 있다. 이를 통해 렌더링에 필요한 데이터를 가져오는데 걸리는 시간과 클라이언트가 수행해야 하는 요청 수가 줄어들어 성능이 향상
Security: 토큰 및 API 키와 같은 중요한 데이터나 로직을 클라이언트에 노출할 위험 없이 서버에 보관이 가능
Caching: 서버에서 렌더링을 수행함으로써 결과를 캐시하고 재사용이 가능하다. 이를 통해 각 요청에 수행되는 렌더링 및 데이터 패칭 양이 줄어들어 성능이 향상되고 비용이 절감됨
Performance: 서버 컴포넌트는 성능을 최적화할 수 있는 추가 도구들을 제공한다. 예를 들어, 전체가 클라이언트 컴포넌트로 구성된 앱을 시작하는 경우, 비대화형(non-interactive) 부분을 서버 컴포넌트로 이동하면 클라이언트 측 필요한 JavaScript 코드를 줄일 수 있다. 따라서 인터넷 속도가 느리거나 성능이 떨어지는 장치를 사용하는 사용자에게 유용
Initial Page Load and First Contentful Paint (FCP) : 서버에서는 클라이언트가 페이지를 렌더링하는데 필요한 JavaScript를 다운로드, 구문 분석 및 실행할 때까지 기다리지 않고 사용자가 즉시 페이지를 볼 수 있도록 HTML을 생성

여기서 FCP란 간단하게 성능을 측정하는데 사용하는 중요한 사용자 중심 측정항목이며 사용자가 처음 페이지로 이동한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링된 시점까지의 시간을 측정한다고 나와있다.

SEO(검색 엔진 최적화 및) 소셜 네트워크 공유성: 렌더링된 HTML은 검색 엔지 봇이 페이지를 색인화하고 소셜 네트워크 봇이 페이지에 대한 소셜 카드 미리보기를 생성하는 데 사용
Streaming: 렌더링 작업을 chunks로 분할하고 준비가 되면 클라이언트로 스트리밍 할 수 있다. 사용자는 전체 페에지가 서버에서 렌더링될 때까지 기다리지 않고 페이지의 일부를 미리 볼 수 있음

Next.js에서 서버 컴포넌트 사용

기본적으로 Next.js는 서버 컴포넌트를 사용한다. 이를 통해 추가 설정 없이 서버 렌더링을 구현할 수 있고 필요한 경우 클라이언트 컴포넌트를 사용하도록 설정할 수 있다.

서버 컴포넌트의 렌더링 방식

서버에서 Next.js는 React의 API를 사용하여 렌더링을 조정한다. 렌더링 작업은 개별 경로 세그먼트와 Suspense Boundaries를 기준으로 분할된다.

각 chunk는 두 단계로 렌더링 된다.

React는 서버 컴포넌트를 React Server Component Payload(RSC Payload)라는 특수 데이터 형식으로 렌더링 한다.
Next.js는 RSC Payload 및 클라이언트 컴포넌트 JavaScript 지침(Instructions)을 사용하여 서버에서 HTML을 렌더링 한다.

그 다음 클라이언트에서 다음을 수행

HTML은 경로(Route)의 빠른 비대화형(non-interactive) 미리보기를 즉시 표시하는 데 사용한다. 이것은 오로지 초기 페이지 로드에만 해당된다.
RSC Payload는 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트하는 데 사용한다.
자바스크립트 지침(The JavaScript instructions)은 클라이언트 컴포넌트를 Hydrate하고 애플리케이션을 대화형을로 만드는 데 사용된다.

Hydrate는 Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트에게 보낸 뒤, 클라이언트 단에서 HTML 코드와 React인 JS코드를 서로 매칭 시키는 과정을 말한다

React 서버 구성 요소 페이로드(RSC)란?
RSC 페이로드는 렌더링된 React 서버 컴포넌트 트리의 압축된 바이너리 표현이다. 클라이언트의 React에서 브라우저의 DOM을 업데이트하는 데 사용된다. RSC 페이로드에는 다음이 포함

서버 컴포넌트의 렌더링 결과
클라이언트 컴포넌트를 렌더링해야 하는 위치 및 JacaScript 파일에 대한 참조에 대한 자리 표시자(Placeholders)
서버 컴포넌트에서 클라이언트 컴포넌트로 전달되는 프롭스(props)

서버 렌더링 전략

위에서 한번 언급했듯이 서버 렌더링에는 정적(static), 동적(dynamic), 스트리밍(streaming) 세 가지 방법이 존재한다.

정적 렌더링 (Default)

정적 렌더링을 사용하면 경로가 빌드 시 렌더링되거나 데이터 재검증(data revalidation) 후 백그라운드에서 렌더링된다. 결과는 캐시되어 CDN(Content Delivery Network)으로 푸시될 수 있다. 이 최적화를 통해사용자와 서버 요청 간에 렌더링 작업 결과를 공유 할 수 있다.

Revalidation: 데이터 캐시를 삭제하고 최신 데이터를 가져오는 과정

동적 렌더링

동적 렌더링을 사용하면 요청 시 각 사용자에 대한 경로가 렌더링된다. 동적 렌더링은 경로(route)에 사용자에게 맞춤화된 데이터가 있거나 쿠키나 URL의 검색 매개변수와 같이 요청 시에만 알 수 있는 정보가 있는 경우 유용하다.

캐시된 데이터가 있는 동적 경로

대부분의 웹사이트에서 경로는 완전히 정적이거나 동적이지 않다. 예를 들어, 주기적으로 재검증되는 캐시된 제품 데이터를 사용하지만 캐시되지 않은 개인화된 고객 데이터도 포함하는 전자 상거래 페이지가 있을 수 있다.

Next.js에서는 캐시된 데이터와 캐시되지 않은 데이터가 모두 있는 경로를 동적으로 렌더링할 수 있다. 이는 RSC 페이로드와 데이터가 별도로 캐시되기 때문이다.
이를 통해 요청 시 모든 데이터를 가져올 때 성능에 미치는 영향을 걱정하지 않고 동적 렌더링을 선택할 수 있다.

Next.js는 사용된 기능과 API를 기반으로 각 경로에 적합한 렌더링 전략을 자동으로 선택하므로 개발자는 정적 렌더링과 동적 렌더링 중에서 선택할 필요가 없다. 대신 특정 데이터를 캐시하거나 재검증할 시기를 선택하고 UI의 일부를 스트리밍하도록 선택할 수도 있다.