서버 구성 요소

React 서버 구성 요소를 사용하면 서버에서 렌더링 및 선택적으로 캐싱할 수 있는 UI를 작성할 수 있습니다. Next.js에서는 라우트 세그먼트에 따라 렌더링 작업이 나눠지어 스트리밍 및 부분 렌더링이 가능하며, 세 가지 서버 렌더링 전략이 있습니다:

• 정적 렌더링
• 동적 렌더링
• 스트리밍

이 페이지에서는 서버 구성 요소가 작동하는 방식, 언제 사용해야 하는지, 그리고 서버 렌더링 전략에 대해 알아보겠습니다.

서버 렌더링의 이점

서버에서 렌더링 작업을 수행하는 것에는 여러 이점이 있습니다:

• 데이터 가져오기: 서버 구성 요소를 사용하면 데이터 가져오기 작업을 데이터 소스에 가깝게 서버로 이동시킬 수 있습니다. 이렇게 하면 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트가 해야 하는 요청 수를 줄여 성능을 향상시킬 수 있습니다.
• 보안: 서버 구성 요소를 사용하면 토큰 및 API 키와 같은 민감한 데이터와 로직을 클라이언트에 노출할 위험이 없이 서버에 유지할 수 있습니다.
• 캐싱: 서버에서 렌더링하면 결과를 캐시하고 후속 요청 및 사용자 간에 재사용할 수 있습니다. 이렇게 하면 각 요청마다 수행되는 렌더링 및 데이터 가져오기 양을 줄여 성능을 향상시키고 비용을 절감할 수 있습니다.
• 성능: 서버 구성 요소를 사용하면 기준을 기반으로 성능을 최적화하기 위한 추가 도구를 제공받을 수 있습니다. 예를 들어 완전히 클라이언트 구성 요소로 구성된 앱을 시작한 경우 UI의 비대화되지 않는 부분을 서버 구성 요소로 이동시킬 수 있어 클라이언트 측 JavaScript 코드 양을 줄일 수 있습니다. 이는 인터넷 속도가 느린 사용자나 성능이 낮은 장치를 사용하는 사용자에게 유익하며 브라우저가 다운로드하고 구문 분석 및 실행해야 하는 클라이언트 측 JavaScript 코드 양이 줄어들기 때문에 성능 향상에 도움이 됩니다.
• 초기 페이지 로드 및 첫 번째 컨텐츠 칠하기(FCP): 서버에서 HTML을 생성함으로써 클라이언트가 필요한 JavaScript를 다운로드, 구문 분석 및 실행하는 동안 기다리지 않고 사용자가 페이지를 즉시 볼 수 있습니다.
• 검색 엔진 최적화 및 소셜 네트워크 공유 가능성: 렌더링된 HTML은 검색 엔진 봇이 페이지를 색인화하고 소셜 네트워크 봇이 페이지에 대한 소셜 카드 미리보기를 생성하는 데 사용될 수 있습니다.
• 스트리밍: 서버 구성 요소를 사용하면 렌더링 작업을 청크로 분할하여 준비되는 대로 클라이언트로 스트리밍하는 것이 가능합니다. 이를 통해 사용자가 전체 페이지가 서버에서 렌더링되기를 기다리지 않고 일부 페이지를 더 빨리 볼 수 있습니다.

Next.js에서 서버 구성 요소 사용하기

기본적으로 Next.js는 서버 구성 요소를 사용합니다. 이를 통해 추가 구성 없이 서버 렌더링을 자동으로 구현할 수 있으며 필요할 때 클라이언트 구성 요소를 사용할 수도 있습니다. 자세한 내용은 Client Components를 참조하세요.

서버 구성 요소는 어떻게 렌더링됩니까?

서버에서 Next.js는 렌더링을 조정하기 위해 React의 API를 사용합니다. 렌더링 작업은 각 라우트 세그먼트와 Suspense Boundaries로 나뉩니다.

각 청크는 두 단계로 렌더링됩니다:

• 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를 보강하고 응용 프로그램을 대화식으로 만드는 데 사용됩니다.

React Server Component Payload (RSC)란 무엇인가요? RSC Payload는 렌더링된 React Server Components 트리의 간결한 이진 표현입니다. 이것은 React가 클라이언트에서 브라우저의 DOM을 업데이트하는 데 사용됩니다. RSC Payload에는 다음이 포함되어 있습니다:

• Server Components의 렌더링 결과
• Client Components가 렌더링되어야 하는 위치에 대한 자리 표시자 및 해당 JavaScript 파일에 대한 참조
• Server Component에서 Client Component로 전달된 모든 props

서버 렌더링 전략

서버 렌더링에는 정적 렌더링, 동적 렌더링, 스트리밍 렌더링이 있습니다.

정적 렌더링 (기본값)

정적 렌더링에서는 라우트가 빌드 시간에 또는 데이터 재유효화 후에 백그라운드에서 렌더링됩니다. 결과는 캐시되어 콘텐츠 전달 네트워크(CDN)로 푸시할 수 있습니다. 이 최적화로 렌더링 결과를 사용자와 서버 요청 사이에서 공유할 수 있습니다.

정적 렌더링은 사용자에 맞게 개인화되지 않은 데이터를 포함하고 빌드 시간에 알 수 있는 정적 블로그 게시물이나 제품 페이지와 같은 라우트일 때 유용합니다.

동적 렌더링

동적 렌더링에서는 라우트가 요청 시 해당 사용자를 위해 렌더링됩니다.

동적 렌더링은 사용자별로 개인화된 데이터를 포함하거나 쿠키나 URL의 검색 매개변수와 같이 요청 시간에만 알 수 있는 정보를 포함하는 라우트일 때 유용합니다.

캐시된 데이터와 함께 동적 라우트 대부분의 웹사이트에서 라우트는 완전히 정적이든 완전히 동적이든 아닌 스펙트럼입니다. 예를 들어, 일정 간격으로 재확인되는 캐시된 제품 데이터를 사용하는 전자 상거래 페이지가 있을 수 있지만 캐시되지 않은 개인화된 고객 데이터도 가질 수 있습니다. Next.js에서는 캐시된 데이터와 캐시되지 않은 데이터를 모두 가지고 있는 동적 렌더링된 라우트를 가질 수 있습니다. 이는 RSC 페이로드와 데이터가 별도로 캐시되기 때문입니다. 따라서 요청 시 모든 데이터를 가져오는 성능 영향을 걱정하지 않고 동적 렌더링을 선택할 수 있습니다. 자세한 내용은 전체 라우트 캐시와 데이터 캐시에 대해 알아보세요.

동적 렌더링으로 전환하기

렌더링 중에 동적 함수나 캐시되지 않은 데이터 요청이 발견되면 Next.js는 전체 라우트를 동적으로 렌더링하도록 전환합니다. 이 표는 동적 함수와 데이터 캐싱이 라우트가 정적으로 또는 동적으로 렌더링되는 방식에 어떻게 영향을 미치는지를 요약한 것입니다:

동적 함수	데이터	라우트
아니요	캐시됨	정적으로 렌더링됨
예	캐시됨	동적으로 렌더링됨
아니요	캐시되지 않음	동적으로 렌더링됨
예	캐시되지 않음	동적으로 렌더링됨

위의 표에서 경로가 완전 정적인 경우 모든 데이터가 캐시되어 있어야 합니다. 그러나 캐시된 데이터 및 캐시되지 않은 데이터를 가져오는 동적으로 렌더링된 경로를 가질 수도 있습니다.

개발자로서 당신은 각 경로에 대해 가장 적합한 렌더링 전략을 자동으로 선택해주는 Next.js 덕분에 정적 또는 동적 렌더링 중에서 선택할 필요가 없습니다. 대신, 특정 데이터를 캐시하거나 다시 유효성을 검사할 때를 선택하고 UI의 일부를 스트리밍할지 여부를 선택할 수 있습니다.

동적 기능

동적 기능은 요청 시에만 알 수 있는 정보에 의존합니다. 예를 들어 사용자의 쿠키, 현재 요청 헤더 또는 URL의 검색 매개변수와 같은 정보입니다. Next.js에서 이러한 동적 함수들은 다음과 같습니다:

• cookies() 및 headers(): 서버 구성 요소에서 이들을 사용하면 전체 경로가 요청 시 동적 렌더링으로 지정됩니다.
• searchParams: 페이지에서 searchParams 속성을 사용하면 페이지가 요청 시 동적 렌더링으로 지정됩니다.

이러한 함수 중 하나를 사용하면 요청 시 전체 경로가 동적 렌더링으로 지정됩니다.

스트리밍

스트리밍은 서버에서 UI를 점진적으로 렌더링할 수 있게 해줍니다. 작업은 청크로 분할되어 준비가 되는 대로 클라이언트로 스트리밍됩니다. 이를 통해 사용자는 전체 콘텐츠 렌더링이 완료되기 전에 페이지 일부를 즉시 볼 수 있습니다.

스트리밍은 기본적으로 Next.js 앱 라우터에 내장되어 있습니다. 이는 초기 페이지 로드 성능뿐만 아니라 전체 라우트 렌더링을 차단할 수 있는 느린 데이터 가져오기에 의존하는 UI를 개선하는 데 도움이 됩니다. 예를 들어 제품 페이지의 리뷰 등이 있습니다.

loading.js를 사용하여 라우트 세그먼트를 스트리밍하고 React Suspense를 사용하여 UI 구성 요소를 볼 수 있습니다. 자세한 내용은 Loading UI 및 Streaming 섹션을 참조해주세요.