[Next.JS] Server Components

리액트 서버 컴포넌트

• 서버에서 렌더링하고 선택적으로 캐싱되는 UI를 작성할 수 있다.

Next.js에서 렌더링 작업은 라우트마다 분리되어 있어 streaming과 부분 렌더링이 가능하다.

렌더링 방법 3가지:

• Static Rendering
• Dynamic Rendering
• Streaming

서버 렌더링 장점 👍🏻⭐️

• Data Fetching: 서버 컴포넌트는 데이터 소스랑 가까운 서버로 데이터 fetching을 옮길 수 있다. 렌더링에 필요한 데이터 패치 시간과 클라이언트가 만들어야 하는 요청의 수를 감소해서 성능이 향상된다.
• 보안: 서버 컴포넌트는 서버에서 민감한 데이터와 로직을 둘 수 있다. (토큰, API key 등을 클라이언트에게 노출될 위험 없이)
• Caching(캐싱): 서버에서 렌더링함으로써, 결과가 캐싱되고 후속으로 오는 요청과 사용자에 걸쳐서 재사용된다. 각 요청마다 렌더링과 데이터 패치의 양을 줄여줘서 비용이 감소한다.
• Performance: 서버 컴포넌트는 기준선으로부터 성능을 최적화하는 추가적인 도구를 제공한다. 예시로, 완전히 다 클라이언트 컴포넌트로 구성된 앱을 시작할 때, 서버 컴포넌트로 상호작용하지 않는 UI들을 이동하면 클라이언트 사이드 자바스크립트 양을 줄일 수 있다. -> 느린 인터넷이나 구린 기계를 쓰는 유저들한테 유용하다.
• Initial Page Load and First Contentful Paint(FCP): 클라이언트가 페이지를 렌더하기 위한 자바스크립트를 다운로드하고 파싱하고 실행하는 걸 기다리게 하지 않고, 서버에서 페이지에 유저에게 즉시 보이는 HTML을 생성할 수 있다.
• Search Engine Optimization and Social Network Shareability: 렌더링된 HTML은 검색 엔진 봇이 페이지를 인덱싱하고 소셜 카드 프리뷰를 만드는 데에 사용될 수 있다.
• Streaming: 서버 컴포넌트는 렌더링 작업을 chunk들로 분리하고 준비가 되면 클라이언트한테 스트리밍할 수 있다. 서버에 렌더되는 전체 페이지를 기다릴 필요 없이 부분부분 먼저 되는 거부터 볼 수 있다.

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

기본적으로 Next.js는 서버 컴포넌트를 사용한다.
클라이언트 컴포넌트를 사용하려면 별도로 선언해야 한다.

서버 컴포넌트가 렌더링되는 방식

서버에서, Next.js는 리액트 API를 사용하여 렌더링을 조정한다. 렌더링 작업은 개별 라우트와 서스펜스 기준으로 청크 단위로 분리된다.

각 chunk는 두 가지 단계로 렌더링된다:
1. 리액트는 서버 컴포넌트를 React Server Component Payload(RSC Payload)라 불리는 특별한 데이터 포맷으로 렌더링한다.
2. Next.js는 RSC Payload를 사용하고 클라이언트 컴포넌트는 서버에 HTML을 렌더링하기 위해 자바스크립트 명령어를 사용한다.

클라이언트에서는:
1. 비대화형(사용자랑 상호작용하지 않는) 경로의 미리보기를 즉시 보여주기 위해 HTML이 사용된다. -> 오직 initial page load를 위해서다.
2. 리액트 서버 컴포넌트 페이로드는 클라이언트 및 서버 컴포넌트 트리를 조정하기 위해 사용되고, DOM을 업데이트한다.
3. 자바스크립트 명령어는 클라이언트 컴포넌트를 hydrate하는 데에 사용되고 애플리케이션을 상호작용 가능하게 만든다.

React Server Component Payload(RSC)가 무엇인가
렌더링된 리액트 서버 컴포넌트 트리의 바이너리 표현이다. 브라우저의 DOM을 수정하기 위해 클라이언트의 React에서 사용된다.

RSC 페이로드 내용:

• 서버 컴포넌트의 렌더링 결과
• 클라이언트 컴포넌트가 어디에 렌더링되어야 하는지와 자바스크립트 파일의 참조의 placeholder
• 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 모든 속성

서버 렌더링 특징

• Static
• Dynamic
• Streaming

Static Rendering(기본값)

라우트가 빌드 타임에 렌더되거나 data revalidation 후에 백그라운드에서 렌더링된다. 결과가 캐싱되고 Content Delivery Network(CDN)에 넣을 수 있다.
-> 유저와 서버 요청 사이에 렌더링 동작의 결과를 공유할 수 있다.

라우트가 유저에 개인화되지 않은 데이터를 갖고 있고 빌드 타임에 알 수 있을 때 유용하다

• 정적인 블로그 포스트나 상품 상세 페이지

Dynamic Rendering

라우트는 요청할 때 각각 유저에게 렌더링된다.

데이터가 유저에게 개인화된 데이터를 갖고 있거나 요청 타임에만 알 수 있는 정보를 갖고 있을 때 유용하다

• 쿠키나 URL's search parmas

Switching to Dynamic Rendering

렌더링 중에, 만약 Dynamic API 또는 fetch 옵션의 { cache: 'no-store' }이 발견되면 Next.js는 전체 라우트를 동적으로 렌더링하도록 바꾼다.

fully static 하려면 모든 데이터가 반드시 캐싱되어야 한다.
하지만 캐시된 그리고 캐싱 안 된 데이터 패치 둘 다를 사용하는 동적으로 렌더링된 라우트도 가질 수 있다.

Next.js는 기능과 사용된 API를 기반으로 라우트를 자동으로 최적의 렌더링 방법을 선택할 것이다.
대신 캐시된 또는 재검증한 특정 데이터를 선택할 때 UI의 어떤 부분을 stream 부분으로 둘 것인지 정해야 한다.

Dynamic APIs

Dynamic API는 요청시에만 알 수 있는 정보에 의존한다.(미리 렌더링하는 중에는 알 수 없다.)

예시:

• cookies
• headers
• connection
• draftMode
• searchParams prop
• unstable-noStore

Streaming

스트리밍은 서버로부터 UI를 점진적으로 렌더링할 수 있게 한다.
동작은 chunk 단위로 나누어져 있고 준비가 되면 클라이언트에게 stream 된다.
-> 모든 콘텐츠의 렌더링이 완료되기 전에 페이지의 부분이라도 즉시 볼 수 있게 한다.

스트리밍은 Next.js 앱 라우터에 기본적으로 탑재되어 있다.

• 처음 페이지 로딩성능과 느린 데이터에 의존하는 UI에 도움이 된다.

loading.js와 React Suspense 컴포넌트를 사용해서 스트리밍 라우트 세그먼트를 시작할 수 있다.