[next 14 공식문서 부시기] 4.1 Server Components

Server Components

React Server Components 를 사용하면 서버에서 렌더링하고 선택적으로 캐시할 수 있는 UI를 작성할 수 있습니다. Next.js에서는 streaming 과 partial rendering을 활성화하기 위해 렌더링 작업이 경로 세그먼트별로 추가로 분할됩니다.

기본적으로 Next.js는 Server Components를 사용합니다. 필요할 때 Client Components 사용을 선택할 수 있습니다.

서버 렌더링의 이점

• Data Fetching: Server Components 를 사용하면 서버 데이터 소스에 더 가까운 서버에서 데이터 요청을 수행할 수 있습니다 . 이를 통해 렌더링에 필요한 데이터를 가져오는 데 걸리는 시간과 클라이언트가 수행해야 하는 요청 수를 줄여 성능을 향상할 수 있습니다.
• Security: Server Components 를 사용하면 토큰 및 API 키와 같은 중요한 데이터와 논리를 클라이언트에 노출할 위험 없이 서버에 보관할 수 있습니다.
• Caching: 서버에서 렌더링하면 결과를 캐시하고 후속 요청 및 사용자 전체에서 재사용할 수 있습니다. 이렇게 하면 각 요청에 대해 수행되는 렌더링 및 데이터 가져오기 양이 줄어들어 성능이 향상되고 비용이 절감될 수 있습니다.
• Bundle Sizes: 서버 컴포넌트를 사용하면 클라이언트에 의해 다운로드되었던 JavaScript bundle 의 큰 종속성을 서버에서 처리할 수 있게 됩니다. 클라이언트가 Server Components용 JavaScript 를 다운로드, 구문 분석 및 실행할 필요가 없기 때문에 인터넷 속도가 느리거나 성능이 떨어지는 장치를 사용하는 사용자에게 유용
• Initial Page Load and First Contentful Paint (FCP) : 서버에서는 클라이언트가 페이지를 렌더링하는 데 필요한 JavaScript를 다운로드, 구문 분석 및 실행할 때까지 기다리지 않고 사용자가 즉시 페이지를 볼 수 있도록 HTML을 생성할 수 있습니다.
• SEO : 렌더링된 HTML은 검색 엔진 봇이나 소셜 네트워크 봇이 페이지를 색인하는데 유리합니다.
• Streaming: 렌더링 작업을 청크로 분할하고 준비가 되면 클라이언트로 스트리밍할 수 있습니다. 이를 통해 사용자는 전체 페이지가 서버에서 렌더링될 때까지 기다리지 않고도 페이지의 일부를 더 일찍 볼 수 있습니다.

동작방식

청크 렌더링 과정

1. React는 Server Components를 React Server Component Payload(RSC Payload)라는 특수 데이터 형식으로 렌더링합니다.
2. Next.js는RSC Payload 및 Client Component JavaScript 명령문을 사용하여 서버에서 HTML을 렌더링합니다.

클라이언트 처리 과정

1. HTML은 경로의 빠른 비대화형 미리보기(non-interactive preview)를 즉시 표시하는 데 사용됩니다. 이는 초기 페이지 로드에만 해당됩니다.
2. RSC Payload는 Client 및 Server Components 트리를 조정하고 DOM을 업데이트하는 데 사용됩니다.
3. JavaScript 명령문은 Client Component 를 hydrate 하고 애플리케이션을 대화형(interactive)으로 만드는 데 사용됩니다.

※ RSC Payload 는 무엇인가

RSC Payload는 렌더링된 React Server Components 트리의 압축된 이진 표현입니다. 클라이언트의 React에서 브라우저의 DOM을 업데이트하는 데 사용됩니다.

포함되는 요소들

• Server Components 의 렌더링 결과
• Client Components 를 렌더링해야 하는 위치에 대한 Placeholders 와 JavaScript 파일에 대한 참조
• Server Components 에서 Client Component로 전달되는 모든 Props

서버 랜더링 전략 | Server Rendering Strategies

서버 렌더링에는 Static(정적), Dynamic(동적), Streaming(스트리밍)의 세 가지 전략이 있습니다.

정적 랜더링 | Static Rendering (Default)

정적 렌더링의 경우 경로는 빌드 시 렌더링되거나 데이터 재검증 후 백그라운드에서 렌더링됩니다. 결과는 캐시되어 CDN(Content Delivery Network)으로 저장될 수 있습니다.

동적 랜더링 | Dynamic Rendering

동적 렌더링의 경우 요청 시 각 사용자에 대한 경로가 렌더링됩니다. 동적 렌더링은 경로에 사용자에게 맞춤화된 데이터가 있거나 쿠키나 URL의 검색 매개변수와 같이 요청 시에만 알 수 있는 정보가 있는 경우 유용합니다.

Next.js에서는 캐시된 데이터와 캐시되지 않은 데이터가 모두 포함된 경로를 동적으로 렌더링할 수 있습니다. 이는 RSC 페이로드와 데이터가 별도로 캐시되기 때문입니다. 이를 통해 요청 시 모든 데이터를 가져올 때 성능에 미치는 영향을 걱정하지 않고 동적 렌더링을 선택할 수 있습니다.

※ 동적 랜더링 전환과정 | Switching to Dynamic Rendering

렌더링하는 동안 동적 기능이나 캐시되지 않은 데이터 요청이 발견되면 Next.js는 전체 경로를 동적으로 렌더링하도록 전환합니다. 즉 경로가 완전히 정적으로 처리 되려면 모든 데이터가 캐시되어야 합니다.

Next.js가 사용된 기능과 API를 기반으로 각 경로에 가장 적합한 렌더링 전략을 자동으로 선택하며 대신, 특정 데이터를 캐시하거나 재검증할 시기를 선택하고 UI의 일부를 스트리밍하도록 선택이 가능합니다.

---

참고

https://nextjs.org/docs/app/building-your-application/rendering/server-components