React Server Components

Next.js·2023-11-06

🔗 Server Components

React Server Component를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 UI를 구현할 수 있습니다. Next.js에서는, route segments로 렌더링 과정을 더 조각내고 이것을 실시간으로 전송(streaming)하여 부분적으로 렌더링할 수 있습니다.

🔗 Benefits of Server Rendering

서버에서 렌더링하면 다음과 같은 이점들이 있습니다:

Data Fetching

Server Components는 서버에서 데이터 패칭을 할 수 있게 해줍니다. 데이터 소스(database, 외부 API, cache, file system…)에 더 가까운 서버에서 렌더링하기 때문에 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간을 줄여주고, 클라이언트가 해야 하는 요청의 양을 줄여주어 성능을 향상시킬 수 있습니다.

Security

토큰 및 API 키와 같은 민감한 데이터 및 로직을 클라이언트에 노출시키지 않고 서버에 안전하게 보관할 수 있습니다.

Caching

서버에서 렌더링하면 결과물을 캐시할 수 있고 이후의 요청 및 여러 사용자에게 재사용할 수 있습니다. 이는 각 요청마다 수행되는 렌더링과 데이터 가져오기 양을 줄여 성능을 향상시키고 비용을 절감할 수 있습니다.

Bundle Sizes

이전에는 클라이언트 자바스크립트 번들 크기에 영향을 끼칠 수 있었던 큰 디펜던시들을 서버에서 가지고 있을 수 있습니다. 이는 느린 인터넷 연결이나 성능이 낮은 기기를 사용하는 사용자들에게 이점이 있습니다. 왜냐하면 클라이언트는 디펜던시를 위해 자바스크립트를 다운로드하고 해석하고 실행할 필요가 없기 때문입니다.

Initial Page Load and First Contentful Paint (FCP)

클라이언트에서 페이지에 필요한 자바스크립트를 다운로드, 해석, 실행하는 것을 기다릴 필요 없이, 서버에서 HTML을 생성해서 유저들이 즉시 페이지를 볼 수 있습니다.

Search Engine Optimization and Social Network Shareability

렌더링된 HTML은 검색 엔진 봇이 색인화(index)하는데 사용될 수 있으며 소셜 네트워크 봇이 페이지의 소셜 카드 미리보기를 만드는데에도 사용될 수 있습니다.

Streaming

Server Components는 렌더링 작업을 조각으로 나누어, 클라이언트가 준비될 때마다 실시간으로 전송해줍니다. 이는 유저가 전체 페이지가 렌더링되는 것을 기다릴 필요 없이, 페이지의 일부를 더 빨리 볼 수 있게 해줍니다.

🔗 How are Server Components rendered?

서버에서, Next.js는 React의 API를 사용하여 렌더링을 조율합니다. 렌더링 작업은 개별 경로 세그먼트와 Suspense Boundaries에 따라 조각으로 나뉩니다.

각 조각은 두 단계로 렌더링 됩니다:

React는 서버 컴포넌트를 React Server Componet Payload(RSC Payload)라고 불리는 특별한 데이터 형식으로 렌더링합니다.

Next.js는 HTML을 서버에서 렌더링하기 위해 RSC Payload와 Client Component JavaScript instructions를 사용합니다.

그 후, 클라이언트에서:

렌더링 된 HTML로 빠르고 상호 작용이 없는 미리보기를 즉시 보여줍니다. - 초기 페이지 로드 시

RSC Payload는 클라이언트와 서버 컴포넌트 트리를 조화시키고 DOM을 업데이트하는 데 사용됩니다.

JavaScript instructions는 클라이언트 컴포넌트를 하이드레이션하고 앱을 상호 작용 가능하게 합니다.

🗒️

What is the RSC Payload?

RSC Payload는 렌더링된 서버 컴포넌트 트리의 간략한 이진 표현 방식입니다. 클라이언트에서 리액트에 의해 브라우저 DOM을 업데이트하기 위해 사용됩니다.

The RSC Payload contains:

서버 컴포넌트의 렌더링된 결과물

클라이언트 컴포넌트가 렌더링되어야 할 자리를 표시하는 Placeholders와 그 클라이언트 컴포넌트의 자바스크립트 파일에 대한 참조

서버 컴포넌트에서 클라이언트 컴포넌트로 전달되는 모든 props

🔗 Server Rendering Strategies

세가지 서버 렌더링 전략이 있습니다.

1. Static Rendering (Default)

Static Rendering을 사용하면, 라우트가 빌드 시간 또는 백그라운드에서 revalidation 후 렌더링됩니다. 그 결과를 캐시하고 Content Delivery Network (CDN)에 저장할 수 있습니다. 이 최적화는 렌더링 작업의 결과를 사용자와 서버 요청 간에 공유할 수 있게 해줍니다.

개인화 되지않는 정보나 빌드 시점에 알 수 있는 데이터의 경우 적합합니다. ex. 블로그 포스트, 제품 상세페이지

2. Dynamic Rendering

Dynamic Rendering을 사용하면, 사용자가 요청하면 라우트를 렌더링합니다.

개인화된 정보나 요청 시에 알 수 있는 데이터가 있는 경우 적합합니다. ex. cookies, URL’s search params

Switching to Dynamic Rendering

렌더링하는 동안 dynamic function 또는 uncached data request이 발견되면 Next.js는 전체 경로(route)를 동적으로 렌더링하도록 전환합니다. 둘 중 하나라도 발견되면 전체 경로를 동적 렌더링하도록 합니다.

Dynamic Function Example

cookies()

headers()

useSearchParams()

searchParams

Next.js가 코드에서 사용한 features, APIs를 보고 각 경로에 대해 가장 적합한 렌더링 전략을 자동으로 선택해주기 때문에 개발자는 static인지 dynamic인지 선택할 필요가 없습니다. 대신에, 특정 데이터를 언제 캐시하고 재검증할지, 그리고 어떤 UI을 부분적으로 스트리밍할 지에 집중하면 됩니다.

3. Streaming

스트리밍은 UI를 점진적으로 그릴 수 있게 해줍니다. 작업은 조각으로 분리되고 클라이언트가 준비되면 실시간으로 조각을 보내줍니다. 이것은 유저가 페이지의 전체 내용이 전부 렌더링는 것을 기다릴 필요없이, 페이지의 부분을 즉각적으로 볼 수 있게 해줍니다.

스트리밍은 App Router에 기본 내장되어 있습니다. 이것은 초기 페이지 로딩 성능뿐만 아니라 전체 경로의 렌더링을 차단할 수 있는 느린 데이터에 의존하는 UI의 성능을 개선하는 데에도 도움이 됩니다. 예를들어 제품 페이지의 리뷰들..

loading.js, React Suspense를 사용해 스트리밍을 사용할 수 있습니다.

유현지

안녕하세요

시리즈Next.js

이전글
Next.js
a React framework for building full-stack web applications
2023-10-31
시리즈의 마지막 글 입니다.

홈으로