Server Components

React 서버 컴포넌트를 사용하면 UI를 서버에서 렌더링하고 선택적으로 캐시할 수 있다.
Next.js 에서는 경로 세그먼트별로 렌더링 작업을 분할하여 스트리밍 및 부분 렌더링을 가능하게 한다.
서버 렌더링에는 다음과 같은 세가지 전략이 있다.

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

Benefits of Server Rendering

서버에서 렌더링 하는것은 몇가지 이점이 있다.

• Data Fetching: 서버 컴포넌트는 data fetching을 data source 와 가까운 서버로 옮긴다. 이것은 렌더링에 필요한 데이터 fetch 시간과, 클라이언트의 요청 수를 줄임으로서 퍼포먼스를 향상시킨다.

• Security: 서버 컴포넌트는 token, API key 와 같은 민감 데이터와 로직을 클라이언트에 노출될 위험 없이 서버에 보관한다.

• Caching: 서버에 렌더링하면 결과를 캐시하여 이후 요청 및 여러 사용자 간에 재사용할 수 있다. 이를 통해 각 요청에서 수행되는 렌더링 및 데이터 페칭을 줄여 성능을 향상시키고 비용을 절감한다.

• Performance: 서버 컴포넌트는 기본 성능을 최적화 할 수 있는 추가적인 도구를 제공한다. 예를 들어, 전체가 클라이언트 컴포넌트로 구성된 애플리케이션에서 상호작용이 필요하지 않은 UI 요소를 서버 컴포넌트로 이동하면 클라이언트 측에서 필요한 Javascript 양을 줄일 수 있다.
  이는 느린 인터넷 환경이나 성능이 낮은 기기를 사용하는 사용자에게 유리하며, 브라우저가 다운로드, 파싱, 실행해야 할 Javascript의 양이 줄어들어 성능이 향상된다.

• Initial Page Load and First Contentful Paint(FCP)
  서버에서 유저가 즉시 볼 수 있는 HTML을 생성할 수 있다. 이를 통해 클라이언트가 페이지 렌더링에 필요한 javascript를 다운로드, 파싱, 실행할 때까지 기다릴 필요가 없다.

• Search Engine Optimization and Social Network Shareablility: 렌더링된 HTML은 검색 엔진 봇이 페이지를 색인화 하는 데 사용될 수 있으며, 소셜 네트워크 봇이 페이지의 소셜 카드 미리 보기를 생성하는 데 활용될 수 있다.

• Streaming: 서버 컴포넌트를 사용하면 렌더링 작업을 여러 조각으로 나누어 준비되는 대로 클라이언트에 스트리밍할 수 있다. 이를 통해 사용자는 전체 페이지가 서버에게 렌더링될 때까지 기다리지 않고 일부 콘테츠를 먼저 볼 수 있다.

How are Server Components rendered?

서버에서 Next.js 는 React's API를 사용하여 렌더링을 조정한다. 렌더링은 개별 경로 및 Suspense Boundaries에 의해 chunks로 분리 된다.

각각의 chunk는 2 step으로 렌더된다.
1. React는 Server Components를 special data format(React Server Component Payload(RSC Payload))으로 렌더한다.
2. Next.js는 서버에서 RSC Payload와 클라이언트 컴포넌트 JavaScript instructions를 HTML로 렌더한다.

그런 다음 클라이언트에서.
1. HTML은 경로의 빠른 non-interactive 미리보기를 빠르게 보여준다. 이는 초기 페이지 로드에서만 적용된다.
2. React Server component payload는 클라이언트와 서버 컴포넌트 트리를 동기화하고 DOM을 업데이트하는데 사용된다.
3.javascript instructions은 클라이언트 컴포넌트를 hydrate 하여 애플리케이션을 상호작용 가능하게 만든다.

React 서버 컴포넌트 페이로드(RSC Payload)란?

RSC 페이로드는 렌더링된 React 서버 컴포넌트 트리를 압축된 이진 형태로 표현한 것이다. 클라이언트에서 React가 이를 사용하여 브라우저의 DOM을 업데이트 한다. RSC 페이로드에는 다음과 같은 내용이 포함된다.

• 서버 컴포넌트의 렌더링 결과
• 클라이언트 컴포넌트가 렌더링될 자리의 플레이스홀더와 해당 Javascript 파일에 대한 참조
• 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 모든 Props

Server Rendering Strategies

Static Rendering(Default)

정적 렌더링에서는 경로(route)가 빌드 시점에 렌더링되거나, 데이터가 재검증된 후 백그라운드에서 다시 렌더링 된다. 이 렌더링 결과는 캐시되며 콘텐츠 전송 네트워크(CDN)에 배포될 수 있다. 이를 통해 여러 사용자와 서버 요청 간에 렌더링 결과를 공유할 수 있다.
정적 렌더링은 사용자별로 맞춤화되지 않고 빌드 시점에 결정될 수 있는 데이터(예: 정적블로그 게시물 또는 제품 페이지)르 포함하는 경로에 유용.

Dynamic Rendering

동적 렌더링에서는 각 사용자 요청 시 경로(route)가 렌더링 된다.
동적 렌더링은 사용자별로 개인화된 데이터나 요청 시점에서만 알 수 있는 정보(예: 쿠키 또는 URL의 검색 매개변수)를 포함하는 경로에 유용하다.

캐시된 데이터를 사용하는 동적 경로

대부분의 웹사이트에서 경로는 완전히 정적이거나 완전히 동적인 것이 아니라, 그 사이의 스펙트럼에 있다.
예를들어, 전자상거래 페이지의 경우 일정한 간격으로 재검증 되는 캐시된 제품 데이터를 사용하면서도, 캐시되지 않은 개인 맞춤형 고객 데이터를 포함할 수 있다.
Next.js에서는 캐시된 데이터와 캐시 되지 않은 데이터를 모두 포함하는 동적 렌더링 경로를 설정할 수 있다. 이는 RSC 페이로드와 데이터가 개별적으로 캐시되기 때문이다. 이를 통해 모든 데이터 요청 시점에 가져오는 것에 대한 성능 부담 없이 동적 렌더링을 선택할 수 있다.

Switching to Dynamic Rendering

렌더링동안 dynamic function 또는 uncached data request가 발견되면 Next.js는 전체 route를 dynamically rendering으로 바꾼다.
다음 테이블 에서는 어떻게 dynamic function과 data caching이 한 라우트를 정적, 또는 동적으로 렌더하는지 요약한다.

위 표에서 경로가 완전히 정적으로 처리되려면 모든 데이터가 캐시되어야한다. 그러나 동적으로 렌더링되는 경로에서도 캐시된 데이터 가져오기와 캐시되지 않은 데이터 가져오기를 모두 사용할 수 있다.

개발자로서 static, dynmic rendering을 선택할 필요는 없지만 data를 revalidate하거나 cache할지, UI의 어떤 부분을 stream할지 선택해야한다.

Dynamic Functiosn

Dynamic function은 user's cookies, currenct request headers, the URL's search params 와 같이 요청 타임에 알수 있는 정보에 의존한다.

• cookies(), headers(): 서버컴포넌트에서 cookies(), headers()를 사용하면 전체 route를 요청 타임에 dynamic rendering으로 만든다.
• searchParms: 페이지에서 searchParams props를 사용하면 전체 route를 요청 타임에 dynamic rendering으로 만든다.

Streaming

Streaming을 사용하면 서버로부터 점진적으로 UI를 렌더링할 수 있다.
작업이 여러 조각으로 분할되며, 준비되는 대로 클라이언트로 스트리밍된다. 이를 통해 전체 콘텐츠가 렌더링 되기 전에 사용자에게 페이지의 일부를 즉시 표시할 수 있다.

스트리밍은 기본적으로 Next.js 앱라우터(App Router)에 내장되어있다.
이를 통해 초기 페이지 로드 성능을 개선할 수 있으며, 렌더링을 지연시키는 느린 데이터 가져오기에 의존하는 UI도 최적화 할 수있다.
loading.js를 사용하여 경로 세그먼트의 스트리밍을 시작할 수 있으며, React Suspense를 활용하여 UI 컴포넌트를 스트리밍할 수 있다.