개발자
Nextjs 13 서버 컴포넌트 데이터 페칭 질문있습니다.
어제 공식문서를 공부를 조금 해봤는데 데이터 페칭은 왠만하면 서버컴포넌트 측에서 한다고 봤습니다! 근데 만약 데이터를 페칭하는데 필터를 거치는 데이터는 어떻게 해야할까요? 예를들면 리스트가 있는데 낮은가격순 높은가격순 등등으로 필터링을해서 다시 데이터를 리렌더링해야하는데 이럴경우 state로 하려합니다. 근데 서버컴포넌트에선 useHook같은걸 못써서 어떻게 해야할지 잘모르겠습니다. 이럴경우 그냥 클라이언트 컴포넌트로 만들고 리액트쿼리 써야하는걸까요?
답변 2
안녕하세요! 말씀해주신 내용으로만 봤을때는 필터링이 적용되는 시점이 사용자가 상호작용을 할때인가요? ex) "낮은 가격순" 클릭, "높은 가격순" 클릭 그렇다면 클라이언트 컴포넌트로 만들어서 클라이언트 쪽에서 요청을 보내는게 더 쉬운 구현 방법인것 같습니다. - https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side
아발란체
작성자
프론트엔드 개발자 • 2023년 06월 30일
넵 상호작용할때 맞습니다! 감사합니다!
필터를 쿼리스트링을 이용해서 필터해보세요 서버사이드에서 재 호출됩니다
jaERyUN
식스티 프론트엔드 개발자 • 2023년 07월 03일
page.tsx에 fetch하는 함수를 작성하고 인자로 server component에서 searchParams값을 넘겨준다음에 파라미터를 추가해 필터링해주면 될거같습니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
지금 가입하면 모든 질문의 답변을 볼 수 있어요!