Next.js 서버 컴포넌트, 클라이언트 컴포넌트 어떤 식으로 분리해야 하나요??
현재까지 React를 사용하다가 SEO측면이나 사용자 경험 등 여러 방면에서 서버 사이드 렌더링이 갖는 장점이 크다 생각하여, Next로 프로젝트를 하면서 공부하는 중입니다. 지금까지 Next로 프로젝트를 진행하면서, 구글에 찾아봐도 명쾌하게 답을 얻지 못한 문제가 있어서 질문드립니다! 공식문서에서는 최대한 서버 컴포넌트로 만들고, 상호작용이 필요한 부문만 최대한 작게 클라이언트 컴포넌트로 만드는 것을 추천하고 있습니다. 이 말은 당연하게도 이해가 잘 되었습니다. 하지만 제가 만들고 있는 프로젝트에는 검색 페이지, 유저 페이지 등이 있습니다. 검색 페이지를 예로 들면, 사용자가 입력한 검색어를 쿼리 파라미터로 검색 결과 페이지에 넘겨주게 되고, 해당 검색어에 해당하는 데이터를 불러와야 합니다. 그 과정에서 검색어를 useParams()를 사용해서 받아오게 되는데, 이러한 훅을 사용하려면 클라이언트 컴포넌트여야 합니다. 그렇게 최상단에서 검색어를 파싱해서 데이터를 불러와 자식 컴포넌트들에게 넘겨주게 되면, 결국 루트가 클라이언트 컴포넌트가 되어 버리는데, 이런 검색 결과 페이지와 같은 경우엔 SSR이 큰 의미가 없나요?? 비슷한 원리로, 유저의 마이페이지와 같은 경우엔 유저 정보를(userId 등) 이용해서 데이터를 불러와 해당 유저의 정보를 보여주게 되는데, 유저 정보를 프론트 서버에서 페이지를 보내주는 시점에는 알 수 없습니다. 때문에 검색 페이지와 비슷하게 recoil의 atom 등과 같은 곳에서 유저 정보를 빼와서 데이터를 불러오게 될텐데, 그럼 이 경우에도 루트가 클라이언트 컴포넌트가 되어 버립니다. 이렇게 동적으로 발생하는 데이터를 이용해서 데이터를 불러오는 페이지는 SSR이 큰 의미가 없는 것인지 궁금합니다!! 개발 초보라 완전히 잘못 이해하고 있는 것일 수도 있지만, 바로 잡아주시면 감사하겠습니다!