TIL #76 | [Next.js] 클라이언트 내에서의 서버 컴포넌트 사용

클라이언트 내에서의 서버 컴포넌트 사용의 문제점과 해결방안

문제: 클라이언트 컴포넌트 내에 서버 컴포넌트를 넣어 사용할 때 클라이언트에서 구현할 것들이 적절하게 동작하지 않는 문제가 발생하였습니다.

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#interleaving-server-and-client-components

해결: 공식 문서를 찾아보니 클라이턴트 컴포넌트 내에서 서버 컴포넌트를 사용하는 방식은 지원하지 않는다고 나왔습니다. 즉, 클라이언트 내에서 서버 컴포넌트를 사용하면 동작에 이상이 있을 수 있습니다.

![[스크린샷 2024-02-01 오전 9.09.42.png]]

클라이언트 컴포넌트 안에 {children} 으로 서버 컴포넌트가 들어갈 곳을 지정해준 후 클라이언트 컴포넌트로 서버 컴포넌트를 감싸주어야 정상 동작 된다고 합니다.

![[스크린샷 2024-02-01 오전 9.07.19.png]]

위와 같이 반영하기 위해 클라이언트 내에서 서버 컴포넌트가 들어갈 자리를 {children} 으로 지정해준 후

// client component
  <Spacer y={100} />
  {children}
  <Spacer y={100} />

클라이언트 컴포넌트로 서버 컴포넌트를 감싸주었더니 문제 없이 정상 동작되었습니다.

// page.tsx
  <Main> 
	<GetSurfitArticles />
  </Main>