Next.js v13 React Essentials부분 질문입니다.

감사합니다. 초보인데다가 배경지식도 많이없어서 공식문서 읽기가 많이 버겁네요 ㅠㅠ "use client"의 자식으로 서버 컴포넌트를 작성하려면 서버 컴포넌트로도 작동하고 클라이언트 컴포넌트로도 작성하는 컴포넌트여야한다는 국범님의 조언이 아직 이해가 잘 가지않지만, React Essential의 Recommended Pattern: Passing Server Components to Client Components as Props부분처럼 서버컴포넌트를 prop으로 클라이언트 컴포넌트에 넘겨주는 방식으로 사용하면 별문제 없겠죠? (사실 이방식밖에 아직은 모릅니다 ㅠ)

"use client"의 자식으로 서버 컴포넌트를 작성하려면 서버 컴포넌트로도 작동하고 클라이언트 컴포넌트로도 작동하는 컴포넌트여야한다 <-- 이 말은 그냥 말 그대로 받아들이면 됩니다. 서버 컴포넌트는 서버에서 렌더링되니 node.js 런타임에서 돌아가겠죠? 그리고 "use client" 의 자식으로 렌더링되면 클라이언트 컴포넌트로 해석되니 웹브라우저에서 렌더링 될 것이고 결국 이 기준을 모두 만족하려면 node.js 런타임에서도 작동하고 웹브라우저 런타임에서도 작동해야 한다는 뜻입니다. 예를들어 fs는 node.js의 전용 모듈이니 fs를 사용하는 서버 컴포넌트는 "use client"의 자식으로 사용할 경우 에러가 발생할 것입니다 그리고 제가 잘못알고 있었던게 있는데 'use client'의 자식으로 비동기 컴포넌트 호출할 수 있습니다 <ExampleClientComponent> <ExampleServerComponent /> <- async function 사용가능 </ExampleClientComponent> 자바스크립트 기반 프로젝트는 그냥 오류없이 되는거같고 타입스크립트는 위에서 언급한 : "해당 반환 형식 'Promise<Element>'는 유효한 JSX 요소가 아닙니다" 에러 발생하는데 <ExampleServerComponent /> 컴포넌트 위에 주석하나 달아주면 클라이언트 사이드 렌더링도 가능합니다 (안되는줄 알았는데 제 착각이었습니다) {/* @ts-expect-error Async Server Component */} 이렇게 하면 <ExampleServerComponent /> 에서 fetch사용할 수 있고 문제없이 렌더링됩니다

감사합니다!!