게시판 리스트 만들때 어디부터 use client를 적용할 지 모르겠어요

Question

<리스트> <레코드1/> <레코드2/> 일 경우… 리스트단에서 use client로 한 후 zustand에서 리스트 자체를 통으로 관리해야하는가? 각각의 레코드에 use client를 한 후 데이터를 받으면 zustand에 리스트를 만들어 레코드별로 hash(Map)으로 등록해 관리해야하는가? 레코드에는 좋아요, 조회수 등이 표시됨. 제 생각은 1번은 SEO가 중요한건 각각 레코드 (상세페이지) 이므로 zustand에서 통으로 넣어 관리하면 되니 구현 및 데이터 신뢰도에서는 나아보이는데 하나바뀌면 전부 렌더링되니까 애매한거같고 2번은 서버에서 모두 다 가져와서 초기속도는 빠르고 seo에 좋으나 zustand에 통으로 못넣고 데이터 자체를 내가 직접관리하는 구조라 구현 및 데이터 신뢰 측면에서는 골치아플거같은데… 무엇이 일반적인 구현방식인지 모르겠습니다. 도와주세요 ㅠㅠ

jaenam · Answer

어떻게 답변을 드려야 좋을지를 고민하느라 답이 늦었습니다.   우선 먼저 말씀드리고 싶은 것은, 대부분의 고민 되는 문제에는 정답이 없다는 것입니다. 그렇기 때문에, 다양한 관점에서 문제를 바라보고, 여러 가지 해결책을 모색하는 것이 중요합니다.   질문 내용을 보면, 직접 말씀하신 두 안에 따라 작성해 보신 다음 비교해보는 데에 큰 노력이 필요한 것은 아닌 듯 합니다. 만약 프로젝트의 규모가 크고 복잡해서 두 안을 테스트 하기가 어렵다면, 작은 프로토타입을 만들어서 두 가지 접근 방식을 시도해 보는 것도 좋은 방법입니다. 이를 통해 질문자님의 '생각', 즉 '추정'이 참인지 아닌지를 검증해볼 수 있을 것입니다.   제 생각에는 1안에 따라 zustand에서 '통으로' 관리한다고 해서 반드시 '하나가 바뀌면 전부 렌더링된다'는 결론이 나올 것 같지 않습니다. 반면 2안에 따르더라도 zustand에 통으로 넣지 못한다는 것도, 질문 주신 프로젝트의 구체적인 코드 상황을 보지 않은 저로서는 반드시 그런지 알 수가 없네요. 그렇기 때문에, 두 가지 접근 방식을 모두 시도해 보고, 실제로 어떤 방식이 더 효율적인지 확인해 보시는 것이 좋겠다는, 다소 원론적인 답변밖에 드릴 수 없을 것 같습니다.   저는 제법 오랜 기간 개발 일을 하고 있는 일개 개발자일 뿐이어서, "일반적인 구현 방식은 이렇다"라고 단정할 만큼 개발 업계 전반의 개발 방식을 두루 파악하고 있지 않으며, 세상 어느 누구도 그렇게 할 수는 없다고 생각합니다. 그렇기 때문에, 질문자님께서도 본인의 프로젝트에 가장 적합한 방법을 찾아가는 과정이 중요하다고 생각합니다.   다만 말씀하신 '일반적인 구현방식'이 보편적인 개발 패턴이나 트렌드를 의미한다면, 제가 생각하는 일반적인 목록 구현 방식은 다음과 같습니다. 서버에서 목록 데이터를 한 벌로 가져와서 사용합니다. zustand로 상태를 관리할 수도 있고, 서버 상태 관리(예: react-query, SWR 등)를 사용할 수도 있습니다. 목록의 각 항목 내용이 실시간으로 자주 변경되는 경우, 각 항목에 대한 네트워크 요청을 별도로 관리하여, 변경이 필요한 항목만 업데이트합니다. SEO나 서버 사이드 렌더링, 초기 렌더링 속도 및 렌더링 대상의 최적화는 위 내용과는 별도의 이슈입니다.