Next.js docs를 보고 정리한 내용입니다
Server Components
React Server Components는 UI를 서버에서 렌더링하고 선택적으로 캐시할 수 있는 기능입니다.
Next.js에서는 이러한 렌더링 작업을 route segment로 분할하여 스트리밍(서버 측에서 클라이언트로 데이터를 조금씩 보내는 것)과 부분 렌더링(변경된 부분만 렌더링)을 가능하게 합니다.
서버 렌더링의 장점
Data Fetching
서버 컴포넌트들은 데이터 소스와 더 가까운 위치의 서버로 옮겨질 수 있습니다. 렌더링에 필요한 데이터 페칭의 시간과 클라이언트가 요청해야 하는 데이터의 양을 단축함으로써 성능을 향상시킵니다.
Security
서버 컴포넌트들은 API 토큰과 같은 민감한 데이터나 로직을 클라이언트에 노출될 위험 없이 서버에서 보관합니다.
Caching
서버를 재렌더링 하면 결과들은 캐시되어 재사용 될 수 있습니다. 각각의 요청에 대한 리렌더링과 데이터 페치에 사용되는 양을 줄여 비용을 줄일 수 있어 성능을 향상시킵니다.
Bundle Sizes
기존에는 웹에서 사용되는 JavaScript 코드와 라이브러리들이 클라이언트 측으로 번들링되어야 했습니다. 이러한 번들은 사용자의 브라우저에서 다운로드되어야 했고, 이는 느린 네트워크 연결이나 제한된 디바이스 성능으로 인해 사용자 경험을 저하시킬 수 있었습니다.
하지만 Next.js는 서버 컴포넌트를 사용함으로써 dependency들을 서버측에 유지할 수 있게 합니다. 클라이언트는 어떠한 Javascript들도 다운로드, 구문 분석, 실행할 필요가 없습니다.
Initial Page Load and First Contentful Paint (FCP)
위와 비슷하게 유저에게 바로 보여지는 html 페이지를 생성함으로써 클라이언트가 자바스크립트를 위한 수행들을 할 필요가 없어집니다.
Search Engine Optimization and Social Network Shareability
렌더링된 HTML은 검색 엔진 봇이 페이지를 색인화하는 데 사용되며, 소셜 네트워크 봇은 페이지의 소셜 카드 미리보기를 생성하는 데 사용될 수 있습니다.
즉, 렌더링된 HTML이 검색 엔진 최적화(Search Engine Optimization, SEO)와 소셜 네트워크에서 공유 가능한 컨텐츠로 활용될 수 있습니다.
Streaming
서버 컴포넌트들은 조각으로 쪼개져 클라이언트가 준비되면 부분적으로 렌더링 될 수 있습니다. 자세한 내용은 아래에 설명하겠습니다.
Next.js에서 서버 컴포넌트 사용하기
기본적으로 Next.js는 서버 컴포넌트를 사용합니다. 이는 자동적으로 서버 렌더링을 수행할 수 있게 합니다.
서버 컴포넌트가 렌더링 되는 방법
서버에서 Next.js는 React의 API를 렌더링을 위해 사용합니다. 렌더링은 각각의 route segment와 suspense boundaries로 인해 작은 조각으로 나누어집니다.
각각의 조각들은 두 가지 단계를 통해 렌더링됩니다.
1. React는 서버 컴포넌트를 React Server Component Payload (RSC Payload)라 불리는 특별한 데이터 형식으로 렌더링합니다.
2. Next.js는 RSC payload와 Client Component로 Javascript Instruction들이 서버의 HTML에 렌더링되도록 합니다.
클라이언트 측에서는,
1. HTML은 루트의 빠른 non-interactive한 미리보기를 즉시 보여줍니다. - 이것은 초기 페이지 로드에만 해당됩니다.
2. RSC Payload는 클라이언트와 서버 컴포넌트 트리를 재조정하고 DOM을 업데이트합니다.
3. JavaScript instructions들은 클라이언트 컴포넌트를 활성화시키고 애플리케이션이 상호작용하게 만듭니다.
React Server Component Payload (RSC)란?
RSC payload는 렌더링 된 RSC tree의 압축된 이진 표현식입니다. 이것은 React에 의해 클라이언트가 브라우저의 DOM을 업데이트 하는 데 사용됩니다. RSC payload는 다음을 포합합니다.서버 컴포넌트가 렌더링 된 결과
클라이언트 컴포넌트들이 어디에 렌더링 되어야 하고 그들의 JS 파일에 있어야 하는지에 대한 placeholder 역할
어떠한 prop들이든 서버 컴포넌트에서 클라이언트 컴포넌트로 전달 가능
서버 렌더링의 세 가지 전략
1. Static rendering (Default)
라우트들은 build time에 렌더링 되거나 data revalidation 후에 백그라운드에서 렌더링 됩니다. 결과물은 캐시되어 컨텐츠 전달 네트워크(Content Delivery Network, CDN)에 푸시될 수 있습니다. 이 최적화 방법은 렌더링 작업의 결과를 유저와 서버 요청 간에 공유할 수 있게 합니다.
정적 렌더링은 유저에 따라 달라지지 않는 데이터에서 유용합니다. 예를 들면 정적인 블로그 글이나 제품 설명서와 같은 페이지가 해당이 됩니다.
static rendering의 장점은 서버가 매번 렌더링하지 않고 이미 렌더링 된 파일을 사용자에게 제공하기 때문에 페이지 로딩 속도가 빠르다는 것입니다.
2. Dynamic rendering
각 유저마다 다른 요청시간에 따라 라우트들이 렌더링 됩니다. 사용자 맞춤 데이터나 요청 시에만 알 수 있는 쿠키, URL의 쿼리 파라미터 등의 사용 시 유용합니다.
대부분의 웹사이트들은 fully static하거나 fully dynamic하지 않고 적절히 혼합하여 사용합니다.
Next.js에서 캐시된 데이터와 캐시되지 않은 데이터가 함께 포함된 루트를 동적으로 렌더링 할 수 있습니다. 이는 React Server Components (RSC) 페이로드와 데이터가 별도로 캐시되기 때문에 가능합니다.
이러한 방식을 통해 요청 시 모든 데이터를 가져오는 것이 성능에 미치는 영향을 걱정하지 않고도 동적 렌더링을 선택할 수 있습니다.
3. Streaming
스트리밍은 서버에서 UI를 조금씩 렌더링 할 수 있습니다. 작업들은 잘게 분리되고(chunk) 준비가 되었다면 클라이언트에게 스트리밍됩니다.
스트리밍은 모든 페이지의 렌더링이 끝나기 전에도 유저가 페이지의 부분을 즉시 볼 수 있도록 합니다.
스트리밍은 Next.js의 App 라우터에서 기본적으로 내장되어 있습니다. 초기 페이지 로딩 속도를 높이고 사용자가 페이지를 요청한 후에도 빠르게 초기 UI를 표시함으로써, 느린 데이터 요청에 따른 전체적인 라우트 렌더링의 차단을 방지하는데 도움이 됩니다. 이러한 방식으로 사용자는 초기에 필요한 정보를 볼 수 있고, 추가 데이터가 로드되는 동안에도 페이지의 나머지 부분은 계속해서 보여질 수 있습니다.
Reference
https://nextjs.org/docs/app/building-your-application/rendering/server-components
