nextjs에서 서버 컴포넌트 클라이언트 컴포넌트 분리하는 방법

Question

안녕하세요.
현재 nextjs를 기반으로 커뮤니티 사이트를 만들고 있습니다.
SEO를 가장 중요한 요소로 고려하여 개발하려고 하는데 홈, 게시글 리스트, 게시글 상세 페이지, 마이 페이지, 설정 페이지 등 여러 페이지 중에 어떤 것까지 SEO를 신경써야 할까요?
SEO가 중요한 페이지는 반드시 서버 컴포넌트 위주로 개발하는 게 유리하다면 관련 기술의 키워드가 있을까요? 
요즘 prefetching이나 hydrate 관련된 내용을 찾아보고 있는데 방향성이 맞는지 궁금합니다..!

문정동개발자 · Accepted Answer

Next.js로 SSR을 구현할 때 SEO에도 강점이 있지만 성능면이나 유저경험 측면에서 좋은 것 같아서 저는 상태관리나 hook을 이용하는 컴포넌트를 제외하고 전부 서버컴포넌트로 구성하는게 좋다고 생각합니다.

App router를 사용중이라면 공식 문서에
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns
를 참고하시면

When building React applications, you will need to consider what parts of your application should be rendered on the server or the client. This page covers some recommended composition patterns when using Server and Client Components.
(React 애플리케이션을 빌드할 때, 애플리케이션의 어떤 부분을 서버 또는 클라이언트에서 렌더링할지 고려해야 합니다. 이 페이지에서는 서버와 클라이언트 컴포넌트를 사용할 때 권장되는 몇 가지 구성 패턴을 다룹니다.)

에대한 내용이 아래로 쭉 나옵니다!

실제로 개발할 때에 Client컴포넌트 자식은 전부 Client컴포넌트로 변경되고 Server컴포넌트는 사용하지 못한다는 점 때문에 구현이 어려웠는데 한글 게시물중에
https://yozm.wishket.com/magazine/detail/2271/
참고하니 많은 도움이 됐습니다