Next.js 에서 client component와 server component 구성

 

 

Next.js 공식 홈페이지의 Rendering 파트를 읽다가 프로젝트를 하면서 줄 곧 발목 잡던 내용에 대한 부분이 있어 캡처해서 올리게 되었다. 

 

클라이언트 컴포넌트 안에 데이터를 fetching 하는 서버 컴포넌트를 두었을 경우 클라이언트 컴포넌트에서 async-await를 사용할 수 없다고 하는 에러가 나왔었다. 

 

그렇다면, 서버 컴포넌트는 무조건 클라이언트 컴포넌트 내부에서 렌더될 수 없을까...? 에 대한 내용이 바로 아래 내용에 자세히 적혀있다.

 

 

결론적으론 클라이언트의 props로 서버 컴포넌트를 내려주었을 경우에는 클라이언트 컴포넌트에서 서버 컴포넌트를 렌더할 수 있음을 알려주고 있다.

 

 

찬찬히 공식 홈페이지에 있는 내용을 전부 훑어 봐야할 것 같다.