Server Components - Next.js

Aug/article/Server-Component.md

@@ -0,0 +1,122 @@
+## 🔗 [Server Components](https://nextjs.org/docs/app/building-your-application/rendering/server-components)
+
+### 🗓️ 번역 날짜: 2024.08.04
+
+### 🧚 번역한 크루: 러기(박정우)
+
+---
+
+## 서버 컴포넌트
+
+React 서버 컴포넌트를 사용하면 서버에서 UI를 렌더링하고 선택적으로 캐시할 수 있습니다. Next.js에서는 라우트 세그먼트에 따라 렌더링 작업을 분할하여 스트리밍 및 부분 렌더링을 가능하게 하며, 세 가지 서버 렌더링 전략이 있습니다:
+
+- 정적 렌더링
+- 동적 렌더링
+- 스트리밍
+
+이 페이지에서는 서버 컴포넌트의 작동 방식, 사용 시기, 다양한 서버 렌더링 전략에 대해 설명합니다.
+
+## 서버 렌더링의 이점
+
+서버에서 렌더링 작업을 수행하는 것은 다음과 같은 몇 가지 이점을 제공합니다:
+
+- **데이터 가져오기**: 서버 컴포넌트를 사용하면 데이터 소스에 가까운 서버에서 데이터를 가져올 수 있습니다. 이를 통해 렌더링에 필요한 데이터를 가져오는 시간을 단축하고 클라이언트에서 요청해야 하는 횟수를 줄여 성능을 개선할 수 있습니다.
+- **보안**: 서버 컴포넌트를 사용하면 토큰이나 API 키와 같은 민감한 데이터와 로직을 클라이언트에 노출시키지 않고 서버에 유지할 수 있습니다.
+- **캐싱**: 서버에서 렌더링하면 결과를 캐시하고 이후 요청 및 사용자 간에 재사용할 수 있습니다. 이를 통해 성능을 개선하고 각 요청마다 렌더링 및 데이터 가져오기를 줄여 비용을 절감할 수 있습니다.
+- **성능**: 서버 컴포넌트를 사용하면 기본 성능을 최적화하는 추가 도구를 제공합니다. 예를 들어, 완전히 클라이언트 컴포넌트로 구성된 앱에서 상호작용이 없는 UI 부분을 서버 컴포넌트로 이동하면 클라이언트 측 JavaScript 양을 줄일 수 있습니다. 이는 느린 인터넷이나 성능이 낮은 장치를 사용하는 사용자에게 유리합니다.
+- **초기 페이지 로드 및 첫 번째 콘텐츠 페인트(FCP)**: 서버에서 HTML을 생성하여 사용자가 페이지를 즉시 볼 수 있도록 합니다. 이는 클라이언트가 페이지를 렌더링하는 데 필요한 JavaScript를 다운로드, 파싱, 실행하는 것을 기다리지 않게 합니다.
+- **검색 엔진 최적화(SEO) 및 소셜 네트워크 공유 가능성**: 렌더링된 HTML은 검색 엔진 봇이 페이지를 인덱싱하고 소셜 네트워크 봇이 페이지의 소셜 카드 미리보기를 생성하는 데 사용할 수 있습니다.
+- **스트리밍**: 서버 컴포넌트를 사용하면 렌더링 작업을 청크로 분할하고 준비되는 대로 클라이언트에 스트리밍할 수 있습니다. 이를 통해 전체 페이지가 서버에서 렌더링될 때까지 기다리지 않고 페이지의 일부를 먼저 볼 수 있습니다.
+
+## Next.js에서 서버 컴포넌트 사용
+
+기본적으로 Next.js는 서버 컴포넌트를 사용합니다. 이를 통해 추가적인 설정 없이 자동으로 서버 렌더링을 구현할 수 있으며, 필요할 때 클라이언트 컴포넌트를 선택할 수 있습니다.
+
+---
+
+## 서버 컴포넌트는 어떻게 렌더링되나요?
+
+서버에서 Next.js는 React의 API를 사용하여 렌더링을 조정합니다. 렌더링 작업은 개별 라우트 세그먼트 및 서스펜스 경계를 기준으로 청크로 분할됩니다.
+
+각 청크는 두 단계로 렌더링됩니다:
+
+1. React는 서버 컴포넌트를 특수 데이터 형식인 React 서버 컴포넌트 페이로드(RSC Payload)로 렌더링합니다.
+2. Next.js는 RSC 페이로드와 클라이언트 컴포넌트 JavaScript 지침을 사용하여 서버에서 HTML을 렌더링합니다.
+
+그런 다음 클라이언트에서는:
+
+1. HTML을 사용하여 초기 페이지 로드 시 빠르고 비상호작용적인 미리보기를 즉시 표시합니다.
+2. React 서버 컴포넌트 페이로드를 사용하여 클라이언트와 서버 컴포넌트 트리를 조정하고 DOM을 업데이트합니다.
+3. hydrate를 위해 JavaScript 지침을 사용하여 클라이언트 컴포넌트를 활성화하고 애플리케이션을 상호작용 가능하게 만듭니다.
+
+### React 서버 컴포넌트 페이로드(RSC)란 무엇인가요?
+
+RSC 페이로드는 렌더링된 React 서버 컴포넌트 트리의 간결한 바이너리 표현입니다. 이는 클라이언트에서 React가 브라우저의 DOM을 업데이트하는 데 사용됩니다. RSC 페이로드는 다음을 포함합니다:
+
+- 서버 컴포넌트의 렌더링된 결과
+- 클라이언트 컴포넌트가 렌더링될 자리 표시자 및 해당 JavaScript 파일에 대한 참조
+- 서버 컴포넌트에서 클라이언트 컴포넌트로 전달된 모든 props
+
+## 서버 렌더링 전략
+
+서버 렌더링에는 세 가지 하위 집합이 있습니다: 정적, 동적 및 스트리밍.
+
+### 정적 렌더링 (기본값)
+
+정적 렌더링에서는 라우트가 빌드 시 또는 데이터 재검증 후 백그라운드에서 렌더링됩니다. 결과는 캐시되어 콘텐츠 전달 네트워크(CDN)에 푸시될 수 있습니다. 이 최적화는 렌더링 작업의 결과를 사용자 및 서버 요청 간에 공유할 수 있게 합니다.
+
+정적 렌더링은 라우트의 데이터가 사용자에게 개인화되지 않고 빌드 시 알 수 있는 경우에 유용합니다. 예를 들어 정적 블로그 게시물이나 제품 페이지 등이 있습니다.
+
+### 동적 렌더링
+
+동적 렌더링에서는 라우트가 요청 시마다 사용자에게 맞춰 렌더링됩니다. 동적 렌더링은 쿠키나 URL의 검색 매개변수와 같은 요청 시에만 알 수 있는 정보를 포함하는 라우트에 유용합니다.
+
+### 캐시된 데이터가 있는 동적 라우트
+
+대부분의 웹사이트에서 라우트는 완전히 정적이거나 완전히 동적이지 않습니다. 예를 들어, 간격마다 재검증되는 캐시된 제품 데이터를 사용하는 전자 상거래 페이지가 있을 수 있지만, 캐시되지 않은 개인화된 고객 데이터도 포함될 수 있습니다.
+
+Next.js에서는 캐시된 데이터와 캐시되지 않은 데이터를 모두 포함하는 동적으로 렌더링된 라우트를 가질 수 있습니다. 이는 RSC 페이로드와 데이터가 별도로 캐시되기 때문입니다. 이를 통해 모든 데이터를 요청 시 가져오는 성능 문제 없이 동적 렌더링을 선택할 수 있습니다.
+
+전체 라우트 캐시 및 데이터 캐시에 대해 자세히 알아보세요.
+
+[Building Your Application: Caching](https://nextjs.org/docs/app/building-your-application/caching#full-route-cache)
+
+[Building Your Application: Caching](https://nextjs.org/docs/app/building-your-application/caching#data-cache)
+
+### 동적 렌더링으로 전환
+
+렌더링 중에 동적 함수나 캐시되지 않은 데이터 요청이 발견되면 Next.js는 전체 라우트를 동적으로 렌더링하도록 전환합니다. 이 표는 동적 함수와 데이터 캐싱이 라우트의 정적 또는 동적 렌더링 여부에 어떻게 영향을 미치는지 요약합니다:
+
+| 동적 함수 | 데이터        | 라우트            |
+| --------- | ------------- | ----------------- |
+| 아니요    | 캐시됨        | 정적으로 렌더링됨 |
+| 예        | 캐시됨        | 동적으로 렌더링됨 |
+| 아니요    | 캐시되지 않음 | 동적으로 렌더링됨 |
+| 예        | 캐시되지 않음 | 동적으로 렌더링됨 |
+
+위의 표에서, 라우트가 완전히 정적이 되려면 모든 데이터가 캐시되어야 합니다. 그러나 캐시된 데이터와 캐시되지 않은 데이터 가져오기를 모두 사용하는 동적으로 렌더링된 라우트를 가질 수 있습니다.
+
+개발자로서 정적 렌더링과 동적 렌더링을 선택할 필요는 없습니다. Next.js는 사용된 기능과 API에 따라 각 라우트에 최적의 렌더링 전략을 자동으로 선택합니다. 대신 특정 데이터를 캐시하거나 재검증할 때와 UI의 일부를 스트리밍할 때를 선택합니다.
+
+### 동적 함수
+
+동적 함수는 요청 시에만 알 수 있는 정보(예: 사용자의 쿠키, 현재 요청 헤더 또는 URL의 검색 매개변수)에 의존합니다. Next.js에서 이러한 동적 함수는 다음과 같습니다:
+
+- `cookies()`와 `headers()`: 서버 컴포넌트에서 이를 사용하면 전체 라우트가 요청 시에 동적으로 렌더링됩니다.
+- `searchParams`: 페이지에서 `searchParams` prop을 사용하면 페이지가 요청 시에 동적으로 렌더링됩니다.
+
+이들 중 하나를 사용하면 전체 라우트가 요청 시에 동적으로 렌더링됩니다.
+
+### 스트리밍
+
+![streaming](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fsequential-parallel-data-fetching.png&w=3840&q=75)
+
+스트리밍은 서버에서 UI를 점진적으로 렌더링할 수 있게 합니다. 작업은 청크로 분할되고 준비되는 대로 클라이언트에 스트리밍됩니다. 이를 통해 전체 콘텐츠가 렌더링될 때까지 기다리지 않고 페이지의 일부를 즉시 볼 수 있습니다.
+
+![streaming2](https://nextjs.org/_next/image?url=%2Fdocs%2Fdark%2Fserver-rendering-with-streaming.png&w=3840&q=75)
+
+스트리밍은 Next.js App Router에 기본적으로 내장되어 있습니다. 이는 초기 페이지 로딩 성능을 향상시키고, 전체 라우트 렌더링을 차단할 느린 데이터 가져오기에 의존하는 UI를 개선합니다. 예를 들어, 제품 페이지의 리뷰가 해당합니다.
+
+라우트 세그먼트를 스트리밍하려면 `loading.js`와 React 서스펜스를 사용하여 UI 컴포넌트를 사용할 수 있습니다. 자세한 내용은 로딩 UI 및 스트리밍 섹션을 참조하세요.
+
+[Routing: Loading UI and Streaming](https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)