[Next.js] Server Components

 

기본적으로 Next.js는 서버 컴포넌트를 사용한다.

따라서 추가 구성 없이 서버 렌더링을 자동으로 구현할 수 있으며, 필요한 경우 클라이언트 컴포넌트를 사용하도록 선택할 수 있다.

 

장점

데이터 가져오기: 데이터 가져오기를 데이터 소스에 더 가까운 서버로 옮길 수 있다. 즉 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트의 요청 횟수를 줄여 성능을 향상시킬 수 있다.

보안: 토큰 및 API 키와 같은 민감한 데이터와 로직을 클라이언트에 노출할 위험 없이 서버에 보관할 수 있다.

캐싱: 서버에서 렌더링하면 결과를 캐시하여 후속 요청 및 사용자 전체에서 재사용할 수 있다. 이렇게 하면 각 요청에서 수행되는 렌더링 및 데이터 가져오기 양을 줄여 성능을 개선하고 비용을 절감할 수 있다.

 

성능: 기본적으로 성능을 최적화할 수 있는 추가 도구를 제공한다. 예를 들어, 클라이언트 컴포넌트로만 구성된 앱은 UI 중 상호작용이 필요 없는 부분을 서버 컴포넌트로 이동하면 클라이언트 측 자바스크립트의 양을 줄일 수 있다. 이렇게 하면 브라우저에서 다운로드, 구문 분석 및 실행할 클라이언트 측 자바스크립트가 줄어들기 때문에 인터넷 속도가 느리거나 성능이 낮은 기기를 사용하는 사용자에게 유용하다.

 

초기 페이지 로드 및 첫 번째 콘텐츠풀 페인트( First Contentful Paint, FCP): 서버에서는 클라이언트가 페이지를 렌더링하는 데 필요한 JavaScript를 다운로드, 구문 분석 및 실행할 때까지 기다릴 필요 없이 사용자가 즉시 페이지를 볼 수 있도록 HTML을 생성할 수 있다.

 

검색 엔진 최적화 및 소셜 네트워크 공유 가능성: 렌더링된 HTML은 검색 엔진 봇이 페이지 색인을 생성하는 데 사용할 수 있고 소셜 네트워크 봇이 페이지의 소셜 카드 미리보기를 생성하는 데 사용할 수 있다.

 

스트리밍: 렌더링 작업을 청크로 분할하여 준비되는 대로 클라이언트로 스트리밍할 수 있다. 이를 통해 사용자는 서버에서 전체 페이지가 렌더링될 때까지 기다릴 필요 없이 페이지의 일부를 먼저 볼 수 있다.

 

랜더링 방법

1. 서버에서 Next.js는 React의 API를 사용하여 렌더링을 조율한다.

    렌더링 작업은 개별 경로 세그먼트와 서스펜스 바운더리에 따라 청크로 나뉜다.

2. 청크는 다음과 같은 방법으로 렌더링된다. 

    React는 서버 컴포넌트를 React 서버 컴포넌트 페이로드(RSC 페이로드, React Server Component Payload)라는 특별한 데이터 형식으로 렌더링한다.
     Next.js는 RSC 페이로드와 클라이언트 컴포넌트 자바스크립트 명령어를 사용하여 서버에서 HTML을 렌더링한다.

3. 그 후 클라이언트 사이드에서 다음 경로로 렌더링 된다.

 

    초기 페이지 로드에서 HTML은 경로의 빠른 비대화형(상호작용이 필요 없는) 미리보기를 즉시 표시하는 데 사용된다.

    React 서버 컴포넌트 페이로드는 클라이언트 및 서버 컴포넌트 트리를 조정하고 DOM을 업데이트하는 데 사용된다. 

    자바스크립트 명령어는 클라이언트 컴포넌트에 수분을 공급하고(hydrate) 애플리케이션을 대화형으로 만드는 데 사용됩니다.

 

* React 서버 컴포넌트 페이로드(RSC 페이로드, React Server Component Payload)

1. SSR 랜더링 결과

2. 클라이언트 컴포넌트가 렌더링될 위치와 해당 자바스크립트 파일에 대한 참조를 위한 자리 표시자

3. 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 모든 정보(props)를 포함한다.

 

정적 렌더링(static rendering)

빌드 시 또는 데이터 재검증(data invalidation) 후 백그라운드에서 경로가 렌더링된다.

결과는 캐시되어 콘텐츠 전송 네트워크(CDN)로 푸시될 수 있다.

이 최적화를 통해 사용자와 서버 요청 간에 렌더링 작업 결과를 공유할 수 있다.

정적 블로그 게시물이나 제품 페이지와 같이 경로에 사용자에게 맞춤화되지 않고 빌드 시점에 알 수 있는 데이터가 있는 경우에 유용하다.

 

동적 렌더링(dynamic rendring)

요청 시점에 각 사용자에 대한 경로가 렌더링된다.

Next.js는 캐시된 데이터와 캐시되지 않은 데이터를 함께 포함한 동적으로 렌더링된 경로를 가질 수 있다. 이는 RSC 페이로드와 데이터가 별도로 캐시되기 때문이다.

또한 렌더링 중에 동적 함수 또는 캐시되지 않은 데이터 요청이 발견되면 Next.js는 전체 경로를 동적으로 렌더링하도록 전환합니다. 

사용자 맞춤화된 데이터가 있거나 쿠키 또는 URL의 검색 매개변수와(쿼리) 같이 요청 시점에만 알 수 있는 정보가 있는 경우에 유용하다.

 

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

 

동적 함수(dynamic functions)

사용자의 쿠키, 현재 요청 헤더 또는 URL의 검색 매개변수 등 요청 시점에만 알 수 있는 정보에 의존한다.

cookies() 및 headers(): 서버 컴포넌트에서 이 함수를 사용하면 요청 시 전체 경로가 동적 렌더링으로 선택된다.
searchParams: 페이지에서 searchParams 프로퍼티를 사용하면 요청 시 페이지가 동적 렌더링으로 선택된다.

스트리밍(Streaming)

UI를 점진적으로 렌더링할 수 있다. 작업이 준비되는 대로 청크로 분할되어 클라이언트로 스트리밍된다.

이를 통해 사용자는 전체 콘텐츠의 렌더링이 완료되기 전에 페이지의 일부를 즉시 볼 수 있다.

리액트 서스펜스와 함께 loading.js 및 UI 컴포넌트를 사용하여 경로 세그먼트 스트리밍을 시작할 수 있다.