Server Components
React Server Components를 사용하면 UI를 서버에서 렌더링하고 선택적으로 캐시할 수 있습니다. Next.js에서는 렌더링 작업이 경로 세그먼트별로 분할되어 스트리밍 및 부분 렌더링이 가능하며, 세 가지 다른 서버 렌더링 전략이 있습니다:
이 페이지에서는 Server Components가 어떻게 작동하는지, 언제 사용하면 좋은지, 그리고 다양한 서버 렌더링 전략에 대해 설명합니다.
Benefits of Server Rendering
서버에서 렌더링 작업을 수행하면 몇 가지 이점이 있습니다:
- 데이터 페칭: Server Components를 사용하면 데이터 소스에 더 가까운 서버에서 데이터 페칭을 수행할 수 있습니다. 이는 렌더링에 필요한 데이터를 가져오는 시간을 줄이고 클라이언트에서 요청해야 하는 횟수를 줄여 성능을 향상시킬 수 있습니다.
- 보안: Server Components를 사용하면 토큰이나 API 키와 같은 민감한 데이터와 로직을 클라이언트에 노출될 위험 없이 서버에 유지할 수 있습니다.
- 캐싱: 서버에서 렌더링함으로써 결과를 캐시하고 이후 요청과 사용자 간에 재사용할 수 있습니다. 이는 각 요청 시 수행되는 렌더링과 데이터 페칭의 양을 줄여 성능을 향상시키고 비용을 절감할 수 있습니다.
- 성능: Server Components는 성능을 최적화할 수 있는 추가 도구를 제공합니다. 예를 들어, 완전히 Client Components로 구성된 앱에서 비인터랙티브 UI 부분을 Server Components로 이동하면 클라이언트 측 JavaScript의 양을 줄일 수 있습니다. 이는 느린 인터넷 또는 성능이 낮은 장치를 사용하는 사용자에게 유리합니다.
- 초기 페이지 로드 및 First Contentful Paint (FCP) (opens in a new tab): 서버에서 HTML을 생성하여 사용자가 페이지를 즉시 볼 수 있게 하고, 클라이언트가 페이지를 렌더링하는 데 필요한 JavaScript를 다운로드, 파싱 및 실행할 필요가 없습니다.
- 검색 엔진 최적화 및 소셜 네트워크 공유 가능성: 렌더링된 HTML은 검색 엔진 봇이 페이지를 인덱싱하고 소셜 네트워크 봇이 페이지의 소셜 카드 미리보기를 생성하는 데 사용할 수 있습니다.
- 스트리밍: Server Components를 사용하면 렌더링 작업을 청크로 분할하고 준비되는 대로 클라이언트에 스트리밍할 수 있습니다. 이를 통해 전체 페이지가 서버에서 렌더링될 때까지 기다리지 않고도 사용자가 페이지의 일부를 먼저 볼 수 있습니다.
Using Server Components in Next.js
기본적으로 Next.js는 Server Components를 사용합니다. 이를 통해 추가 구성 없이 서버 렌더링을 자동으로 구현할 수 있으며, 필요에 따라 Client Components를 사용할 수 있습니다. 자세한 내용은 Client Components를 참조하세요.
How are Server Components rendered?
서버에서 Next.js는 React의 API를 사용하여 렌더링을 조정합니다. 렌더링 작업은 개별 경로 세그먼트와 Suspense Boundaries (opens in a new tab)에 따라 청크로 분할됩니다.
각 청크는 두 단계로 렌더링됩니다:
- React는 Server Components를 **React Server Component Payload (RSC Payload)**라는 특별한 데이터 형식으로 렌더링합니다.
- Next.js는 RSC Payload와 Client Component JavaScript 지침을 사용하여 서버에서 HTML을 렌더링합니다.
그런 다음 클라이언트에서는:
- HTML을 사용하여 경로의 빠른 비인터랙티브 미리보기를 즉시 표시합니다 - 이는 초기 페이지 로드에만 해당됩니다.
- React Server Components Payload를 사용하여 Client와 Server Component 트리를 조정하고 DOM을 업데이트합니다.
- JavaScript 지침을 사용하여 Client Components를 하이드레이션 (opens in a new tab)하고 애플리케이션을 인터랙티브하게 만듭니다.
React Server Component Payload (RSC)란 무엇인가요?
RSC Payload는 렌더링된 React Server Components 트리의 간결한 이진 표현입니다. 이는 클라이언트에서 React가 브라우저의 DOM을 업데이트하는 데 사용됩니다. RSC Payload에는 다음이 포함됩니다:
- Server Components의 렌더링된 결과
- Client Components가 렌더링되어야 할 위치와 해당 JavaScript 파일에 대한 참조
- Server Component에서 Client Component로 전달된 모든 props
Server Rendering Strategies
서버 렌더링에는 세 가지 하위 집합이 있습니다: Static, Dynamic, Streaming.
Static Rendering (Default)
Static Rendering에서는 빌드 타임 또는 데이터 재검증 후 백그라운드에서 경로가 렌더링됩니다. 결과는 캐시되며 Content Delivery Network (CDN) (opens in a new tab)에 푸시될 수 있습니다. 이 최적화는 사용자와 서버 요청 간에 렌더링 작업의 결과를 공유할 수 있게 합니다.
Static Rendering은 사용자에게 개인화되지 않은 데이터가 있으며 빌드 타임에 알 수 있는 경로(예: 정적 블로그 게시물 또는 제품 페이지)에 유용합니다.
Dynamic Rendering
Dynamic Rendering에서는 경로가 요청 시 각 사용자에 대해 렌더링됩니다.
Dynamic Rendering은 사용자에게 개인화된 데이터가 있거나 요청 시에만 알 수 있는 정보(예: 쿠키 또는 URL의 검색 매개변수)가 있는 경로에 유용합니다.
캐시된 데이터가 있는 동적 경로
대부분의 웹사이트에서는 경로가 완전히 정적이거나 완전히 동적이지 않습니다 - 이는 스펙트럼입니다. 예를 들어, 일정 간격으로 재검증되는 캐시된 제품 데이터를 사용하는 전자 상거래 페이지와 개인화된 고객 데이터를 포함하는 경우가 있습니다.
Next.js에서는 캐시된 데이터와 캐시되지 않은 데이터를 모두 사용하는 동적으로 렌더링된 경로를 가질 수 있습니다. 이는 RSC Payload와 데이터가 별도로 캐시되기 때문에 가능합니다. 이를 통해 모든 데이터를 요청 시 가져오는 성능 영향을 걱정하지 않고 동적 렌더링을 선택할 수 있습니다.
Switching to Dynamic Rendering
렌더링 중에 동적 함수 또는 캐시되지 않은 데이터 요청이 발견되면, Next.js는 전체 경로를 동적으로 렌더링하도록 전환합니다. 이 표는 동적 함수와 데이터 캐싱이 경로가 정적 또는 동적으로 렌더링되는지 여부에 어떻게 영향을 미치는지 요약한 것입니다:
| 동적 함수 | 데이터 | 경로 |
|---|---|---|
| 아니요 | 캐시됨 | 정적으로 렌더링됨 |
| 예 | 캐시됨 | 동적으로 렌더링됨 |
| 아니요 | 캐시되지 않음 | 동적으로 렌더링됨 |
| 예 | 캐시되지 않음 | 동적으로 렌더링됨 |
위 표에서 경로가 완전히 정적이 되려면 모든 데이터가 캐시되어야 합니다. 그러나 캐시된 데이터 페칭과 캐시되지 않은 데이터 페칭을 모두 사용하는 동적으로 렌더링된 경로를 가질 수 있습니다.
개발자로서 정적 렌더링과 동적 렌더링 중에서 선택할 필요는 없습니다. Next.js는 사용된 기능과 API에 따라 각 경로에 가장 적합한 렌더링 전략을 자동으로 선택합니다. 대신 특정 데이터를 캐시하거나 재검증 시기를 선택하고, UI의 일부를 스트리밍할 시기를 선택할 수 있습니다.
Dynamic Functions
동적 함수는 사용자의 쿠키, 현재 요청 헤더 또는 URL의 검색 매개변수와 같이 요청 시에만 알 수 있는 정보에 의존합니다. Next.js에서 이러한 동적 API는 다음과 같습니다:
이 함수들 중 하나를 사용하면 전체 경로가 요청 시 동적으로 렌더링됩니다.
Streaming
스트리밍을 통해 서버에서 UI를 점진적으로 렌더링할 수 있습니다. 작업은 청크로 나누어지고 준비되는 대로 클라이언트에 스트리밍됩니다. 이를 통해 전체 콘텐츠가 렌더링될 때까지 기다리지 않고도 사용자가 페이지의 일부를 즉시 볼 수 있습니다.
스트리밍은 Next.js App Router에 기본적으로 내장되어 있습니다. 이는 초기 페이지 로딩 성능을 향상시키고, 전체 경로를 렌더링하는 데 방해가 되는 느린 데이터 페칭에 의존하는 UI를 개선합니다. 예를 들어, 제품 페이지의 리뷰가 해당됩니다.
loading.js와 UI 컴포넌트를 React Suspense를 사용하여 경로 세그먼트 스트리밍을 시작할 수 있습니다. 자세한 내용은 Loading UI and Streaming 섹션을 참조하세요.