27강 Context내 RSC 사용 관련 문의

Question

강의 잘 듣고있습니다. 한 가지 궁금한 점이 있어 질문드립니다. "App.tsx를 Provider로 감싸는 순간 그 아래 모든 컴포넌트가 서버 컴포넌트로서의 최적화 기회를 잃는다"는 부분이 잘 이해되지 않습니다. 제가 알기로는 Provider를 children prop으로 받는 composition pattern으로 작성하면, Provider 자체는 Client Component여도 그 안에 들어가는 children은 Server Component로 유지될 수 있는 것으로 알고 있습니다. Next.js App Router의 RootLayout 에서 {children} 형태로 쓰는 패턴이 그 예시라고 알고 있고요. 이 경우에도 RSC 최적화 기회를 잃는다고 보시는 건지, 아니면 제가 놓치고 있는 다른 맥락이 있는지 궁금합니다.

Eden · Answer

AI 답변 감사합니다. 다만 답변 내용 중 "Provider가 클라이언트 컴포넌트라면 그 안의 모든 자식 컴포넌트도 클라이언트 환경에서 실행된다"는 부분이 제가 알고 있는 내용과 차이가 있어 추가로 여쭙고자 합니다. 제가 이해한 바로는, Client Component가 직접 import 한 컴포넌트는 Client 경계에 포함되지만, children prop 으로 외부에서 주입된 컴포넌트는 부모(Server Component)에서 이미 렌더링이 끝난 결과가 슬롯으로 들어가는 것이라 Server Component 상태를 유지하는 것으로 알고 있습니다. 이 composition pattern을 사용하면 Provider를 쓰면서도 children 영역은 RSC로 유지할 수 있어서, 실습 자료의 "정밀 아키텍처 분석"에 적힌 "App.tsx를 10개의 Provider로 감싸는 순간 그 아래의 모든 컴포넌트는 서버 컴포넌트로서의 최적화 기회를 잃게 됩니다"라는 설명이 모든 경우에 해당하지는 않는 것 같습니다. 혹시 강의에서는 composition pattern을 적용하지 않은 일반적인 경우를 전제로 설명해주신 건지, 지식공유자님의 의견이 궁금합니다. (참고로 AI 인턴이 첨부해준 링크는 404 페이지로 연결되어 답변에 직접 관련된 자료는 아닌 것 같습니다.)

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. Eden님. 이 질문은 React 서버 컴포넌트(RSC)와 클라이언트 컴포넌트 간의 상호작용에 대한 것 같습니다. 일반적으로 Providers는 상태 관리나 테마 처리를 위한 Context를 제공하기 때문에 대개 클라이언트 컴포넌트로 구현됩니다. 이는 Providers 내부의 모든 컴포넌트를 클라이언트 환경에서 렌더링하게 만듭니다. 즉, Provider가 클라이언트 컴포넌트라면, 그 안에 있는 모든 자식 컴포넌트들도 클라이언트 환경에서 실행되어야 하며, 이는 서버 컴포넌트로써의 최적화, 즉 데이터 패칭과 초기 렌더링 성능 측면에서의 이점을 잃을 수 있음을 의미합니다. 하지만 Next.js 13의 새로운 app 디렉토리 구조에서는 서버 컴포넌트와 클라이언트 컴포넌트 간의 경계를 유지하는 것이 가능하며, 디자인 패턴에 따라 자식 컴포넌트를 서버 컴포넌트로 재사용하는 방법도 가능합니다. 이 경우 실제로 놓치고 있는 최적화 요소는 자식 컴포넌트가 클라이언트 컴포넌트로 지정된 상황에서 발생하는 추가적인 렌더링이나 데이터 패칭 지연입니다. 강의의 해당 방식이 특별히 어떤 조건 하에서 최적화 기회를 잃는다고 언급된 것인지, 혹은 다른 정확한 맥락이 있는지에 대해서는 아래 링크를 통해 강의 내용 및 토론을 확인해 보시는 것을 추천드립니다: - Next.js의 서버 컴포넌트와 클라이언트 컴포넌트 간의 최적화 방법 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.​​