React Server Components는 서버에서 선택적으로 캐시될 수 있는, 렌더될 수 있는 UI를 작성할 수 있게 해준다. Next.js에서 렌더링 작업은 라우트 세그먼트로 인해 더욱 쪼개진다. 스트리밍과 부분 렌더링을 할 수 있게 해주며 세가지 다른 서버 렌더링 전략이 있다.
- Static Rendering
- Dynamic Rendering
- Streaming
이 페이지에서는 그것을 사용할 때 서버 컴포넌트가 어떻게 동작하는지 그리고 다른 서버 렌더링 전략을 다룬다.
Benefits of Server Rendering (서버 렌더링의 이점)
Data Fetching: 서버 컴포넌트는 서버, 우리의 데이터 소스로 더 가까이 데이터 페칭 작업을 허용한다. 렌더링과 클라이언트가 필요한 많은 요청들에 필요한 데이터 페치 시간을 절약함으로써 성능을 향상시킬 수 있다.
Security: 서버 컴포넌트는 민감한 데이터와 로직 token 과 Api같은 것을 서버에 둘 수 있게 해서 클라이언트에 노출되는 위험이 없다.
Caching: 서버에서 렌더링함으로써 모든 유저와 지속적인 요청에 캐시되고 재사용된다. 이것은 각 요청의 렌더링과 데이터 페칭작업이 완료되는 것의 양을 줄여주어 성능향상과 비용절감을 할 수 있게 해준다.
Performance: 서버 컴포넌트는 baseline으로부터의 성능을 최적화해주는 추가적 툴을 제공한다. 예를들어 전체적으로 클라이언트 컴포넌트로 구성된 앱을 시작하면 인터랙티브하지 않은 당신의 UI 조각을 서버 컴포넌트로 이동시켜주어 클라이언트 사이드 자바스크립트의 양을 줄여준다. 이것은 느린 인터넷 혹은 작은 힘의 디바이스를 가지고 있는 유저에 유익하다. 브라우저가가지고 있는 다운로드, 파싱, 실행을 위한 자바스크립트의 양이 적기 때문에.
Initial Page Load and First Contentful Paint(FCP) : 서버에서 우리는 유저가 페이지를 즉시 볼 수 있도록 HTML 페이지를 생성할 수 있다. 이는 클라이언트가 페이지를 렌더하는데 필요한 다운로드, 파싱, 자바스크립트 실행을 위한 기다림이 없게 된다.
- * FCP란? : 사용자가 처음 페이지로 이동한 시점부터 페이지 콘텐츠의 일부가 화면에 렌더링된 시점 까지의 시간. (콘텐츠 : 텍스트, 이미지, svg 또는 흰색이 아닌 canvas)
Search Engine Optimization and Social Network Shareability:
렌더링된 HTML은 검색 엔진 로봇에 의해 사용될 수 있다. 이것은 페이지와 소셜 네트워크 로봇이 우리 페이지의 소셜 카드 미리보기를 생성하고 페이지를 인덱싱 하기 위해 사용된다.
Streaming:
서버 컴포넌트는 렌더링 작업을 청크로 쪼갤 수 있게 해주고 클라이언트에게 준비가 될 때 스트림할 수 있게 해준다. 이것은 유저에게 서버에서 전제 페이지가 렌더링 되는데 기다리지 않고 페이지의 일부분을 먼저 볼 수 있게 해준다.
Using Server Components in Next.js
기본적으로 Next.js는 서버 컴포넌트를 사용한다. 이것은 자동으로 추가적 구성없이 자동으로 서버 렌더링을 구현할 수 있게 해주며, 필요할 때 클라이언트 컴포넌트를 도입할 수 있게 해준다.
어떻게 Server Components가 렌더되는가?
서버에서 Next.js는 React의 API를 렌더링을 구현하기 위해 사용한다. 렌더링 작업은 청크로 쪼개진다. 개별 라우트 세그먼트와 서스펜스 바운더리에 의해. Suspense Boundaries
각각의 청크는 두 단계로 렌더된다 :
- 리액트는 서버 컴포넌트를 React Server Component Payload(RSC Payload)라고 불리는 특별한 포맷으로 렌더링 한다.
- Next.js는 서버에서 HTML을 렌더링 하기 위해 RSC Payload와 Client Component Javascript 지시를 사용한다.
그리고 클라이언트에서는 :
- HTML은 즉시 라우트의 인터랙티브하지 않은 프리뷰를 보여주는데 사용된다. - 이것은 오로지 최초 페이지 로드를 위함이다.
- React Server Components Payload는 클라이언트와 서버 컴포넌트 트리를 리컨실하고 DOM을 업데이트 하는데 사용한다.
- Javascript 지시는 클라이언트 컴포넌트를 hydrate하고 애플리케이션을 동적으로 만드는데 사용된다. hydrate
React Server Component Payload(RSC)란 무엇인가?
RSC Payload는 렌더링 된 컴팩트한 리액트 서버 컴포넌트 트리의 이진 표현(binary representation)이다. 브라우저의 DOM을 업데이트 하기 위해 클라이언트쪽의 리액트에 의해 사용된다. RSC Payload는 다음을 포함한다 :
- 렌더된 서버 컴포넌트의 결과
- 클라이언트 컴포넌트가 렌더되어야 할 곳의 플레이스 홀더와 자바스크립트 파일로의 참조
- 서버 컴포넌트에서 클라이언트 컴포넌트로 전달되는 모든 프롭들
Server Rendering Strategies
세 가지 서버 렌더링의 부분집합 : Static, Dynamic, Streaming
Static Rendering (기본값)
static rendering으로 route는 빌드 타임 혹은 data 갱신이후 백그라운드에 렌더링된다. 결과는 캐시되며 Content Delivery Network(CDN)에 푸시될 수 있다. 최적화는 유저와 서버 요청사이에 렌더링 작업의 결과물을 공유가 가능하게 한다.
정적 렌더링은 정적 블로그 포스트나 프로덕트 페이지와 같이 라우트가 유저에게 개별화 되어있지 않은데 빌드 타임에 알 수 있게 되는 데이터를 가지고 있을 때 유용하다.
Dynamic Rendering
Dynamic Rendering으로 라우트는 각 유저에게 요청시간에 렌더링 된다.
다이내믹 렌더링은 라우트가 유저에 개별화 되어있거나 요청 시간에 오로지 알 수 있는 쿠키나 URL의 search params와 같은 데이터를 가지고 있을 때 유용하다.
Dynamic Routes with Cached Data
대부분의 웹사이트에서 라우트는 완전히 정적이거나 다이내믹하지 않다. 범위다. 예를들어 우리는 주기적으로 갱신되는 캐시된 프로덕트 데이터뿐만 아니라, 캐시되지 않고 개별화되어있는 고객 데이터도 또한 가지고 있는 e-commerce 페이지를 가지고 있을 수 있다.
Next.js에서 당신은 캐시된 것과 안된 데이터를 모두 가지고 있는 렌더링 된 라우트를 동적으로 가질 수 있다. RSC Payload와 데이터가 개별적으로 캐시되기 때문이다. 모든 데이터를 요청 시간에 가져오는 것의 성능 저하 이슈 없이 다이내믹 렌더링을 채택할 수 있도록 만든다.
Learn more about the full-route cache and Data Cache.
Switching to Dynamic Rendering
렌더링중 만약 다이내믹 함수또는 캐시되어있지 않은 데이터 요청이 발견되면 Next.js는 모든 라우트를 동적으로 렌더링하는 것으로 변경한다. 테이블 요약은 어떻게 다이내믹 함수와 데이터 캐싱이 라우트가 정적 또는 동적으로 렌더링되는지 영향을 미치는지에 대해서이다.
| Dynamic Functions | Data | Route |
| No | Cached | Statically Rendered |
| Yes | Cached | Dynamically Rendered |
| No | Not Cached | Dynamically Rendered |
| Yes | Not Cached | Dynamically Rendered |
위 테이블에서 라우트가 모두 정적이기 위해 모든 데이터는 캐시되어있어야 한다. 그러나 캐시된 것과 안된 데이터 페치 둘다 사용하는 동적으로 렌더링된 라우트를 가질 수 있다.
개발자로서 정적과 동적 렌더링을 결정하지 않아도 된다.기능과 사용된API에 기반한 각 라우트에 대한 최적의 렌더링 전략을 Next.js가 자동으로 선택할 것이다. 대신 캐시나 특정 데이터를 갱신할 때를 선택하여야 하고, 해당 UI의 부분의 스트림을 선택해야 할 것이다.
Dynamic Functions
Dynamic Functions는 유저의 쿠키, 현재 요청 헤더, URL의 search params와 같은 요청 타임이 되어야 알 수 있는 정보에 의존하고 있다. Next.js에서 이 다이내믹 함수들은
- cookies 와 headers : 서버 컴포넌트에서 이러한 것들을 사용하면 전체 라우트를 요청시간에 동적 렌더링으로 전환 될 것이다.
- searchParams: searchParams 프롭을 페이지에서 사용하면 요청 시간에 동적 렌더링으로 전환 될 것이다.
이러한 함수를 사용하면 전체 라우트를 요청 시간에 동적 렌더링으로 전환 될 것이다.
Streaming
스트리밍은 점진적으로 서버에서 UI를 렌더링할 수 있게 만들어준다. 작업은 청크로 나눠지며 준비가 됨에 따라 클라이언트에게 스트림된다. 이것은 전체 페이지가 렌더링이 끝나기 전에 유저가 즉각적으로 페이지의 부분을 볼 수 있게 만들어준다.
스트리밍은 Next.js App Router에 기본적으로 내장되어있다. 느린 데이터 페치, 전체 라우트를 렌더링하지 못하도록 막는 느린 데이터에 의존하는 UI 뿐만 아니라 초기 페이지 로딩 성능 두 가지 다 개선하는 데 도움을 준다. 예를 들어 상품 페이지의 review들과 같은 것이다.
loading.js를 활용하여 route segments 스트리밍을 시작할 수 있고 React Suspense로 UI components 스트리밍을 할 수 있다.