Next.js 서버 컴포넌트, 클라이언트 컴포넌트 어떤 식으로 분리해야 하나요??

Question

현재까지 React를 사용하다가 SEO측면이나 사용자 경험 등 여러 방면에서 서버 사이드 렌더링이 갖는 장점이 크다 생각하여, Next로 프로젝트를 하면서 공부하는 중입니다.

지금까지 Next로 프로젝트를 진행하면서, 구글에 찾아봐도 명쾌하게 답을 얻지 못한 문제가 있어서 질문드립니다!

공식문서에서는 최대한 서버 컴포넌트로 만들고, 상호작용이 필요한 부문만 최대한 작게 클라이언트 컴포넌트로 만드는 것을 추천하고 있습니다.
이 말은 당연하게도 이해가 잘 되었습니다.

하지만 제가 만들고 있는 프로젝트에는 검색 페이지, 유저 페이지 등이 있습니다.

검색 페이지를 예로 들면, 사용자가 입력한 검색어를 쿼리 파라미터로 검색 결과 페이지에 넘겨주게 되고, 해당 검색어에 해당하는 데이터를 불러와야 합니다.
그 과정에서 검색어를 useParams()를 사용해서 받아오게 되는데, 이러한 훅을 사용하려면 클라이언트 컴포넌트여야 합니다.

그렇게 최상단에서 검색어를 파싱해서 데이터를 불러와 자식 컴포넌트들에게 넘겨주게 되면, 결국 루트가 클라이언트 컴포넌트가 되어 버리는데, 이런 검색 결과 페이지와 같은 경우엔 SSR이 큰 의미가 없나요??

비슷한 원리로, 유저의 마이페이지와 같은 경우엔 유저 정보를(userId 등) 이용해서 데이터를 불러와 해당 유저의 정보를 보여주게 되는데, 유저 정보를 프론트 서버에서 페이지를 보내주는 시점에는 알 수 없습니다. 때문에 검색 페이지와 비슷하게 recoil의 atom 등과 같은 곳에서 유저 정보를 빼와서 데이터를 불러오게 될텐데, 그럼 이 경우에도 루트가 클라이언트 컴포넌트가 되어 버립니다.

이렇게 동적으로 발생하는 데이터를 이용해서 데이터를 불러오는 페이지는 SSR이 큰 의미가 없는 것인지 궁금합니다!!

개발 초보라 완전히 잘못 이해하고 있는 것일 수도 있지만, 바로 잡아주시면 감사하겠습니다!

포크코딩 · Answer

아마 Layout 부분에 감싸서 최상위 컴포넌트가 클라이언트 컴포넌트니까 하위 요소들도 클라이언트 컴포넌트라고 생각하시는거 같습니다. 초보시니 자세한 내용은 생략하겠습니다. 1. <SomeClientComponent>{children}</SomeClientComponent> 1번처럼 하면 children 안에 있는 리액트 노드는 무조건 클라이언트 컴포넌트가 되는건 아닙니다. 확인해보고 싶으시다면 console.log 찍어서 브라우저에 찍히나 개발환경 콘솔에 찍히나 보세요. 2. <SomeClientComponent> <퉁퉁이/> <도라에몽/> <노진구/> </SomeClientComponent> 2번처럼 하면 퉁퉁이, 도라에몽 그리고 노진구는 클라이언트 컴포넌트가 됩니다. 'use client'가 적혀있지 않아도 클라이언트 컴포넌트가 됩니다.