구현 기능

---

원래 카테고리별 상품 조회 API를 클라이언트 컴포넌트에서 토큰을 넣어 data fetch 후 처리하였음

카테고리별 상품 조회 API는 모든 유저들에게 같은 데이터를 제공하는 API이므로 토큰이 필요하지 않도록 수정하고 서버 컴포넌트에서 data fetch 하는 것이 성능에 더 좋을 것 같아 백엔드 팀원과 이야기 후 토큰이 필요 없도록 수정하였음

-> 클라이언트 컴포넌트에서 fetch하던 카테고리별 상품 조회 API를 서버 컴포넌트에서 data fetch 하도록 수정하기

구현 과정 & 트러블 슈팅

---

문제 : API 무한 호출

카테고리별 상품 조회 API는 /categories/{categoryId}/{gender}/{filterId}와 같이 카테고리 ID, 성별, 정렬 기준(ex. 최신순, 조회수순, 낮은 가격순, 높은 가격순) 3개를 URL 뒤에 붙여서 요청하게 되어있다.

카테고리 ID는 dynamic routes에 포함되어 있어서 params로 가져오면 되지만 성별은 로컬 스토리지에서, 정렬 기준은 state로 관리하고 있어 클라이언트 컴포넌트 안에 API를 요청하는 서버 컴포넌트가 들어가게 되었고, API 무한 호출이 일어나게 되었다.

https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#unsupported-pattern-importing-server-components-into-client-components

공식 문서를 확인해보니 이는 지원하지 않는 패턴이었다.

그래서 지원하는 패턴인 서버 컴포넌트를 클라이언트에 Props로 전달하는 방식을 이용해서 구현해보았으니 그래도 고쳐지지 않았다.

해결 : 서버 컴포넌트에서 data fetch한 후 클라이언트 컴포넌트에서 필터링하여 보여주는 방식으로 변경

서버 컴포넌트인 page.tsx에서 카테고리, 성별, 정렬 기준 별 전체 데이터를 가져오고 클라이언트 컴포넌트인 children component에 넘겨서 유저가 선택한 필터값에 따라 필터링해서 보여주도록 수정하였고, 정상적으로 작동하게 되었다.

서비스 내에서 2주에 한 번씩 상품 업데이트가 일어날 예정이므로 revalidate 값을 3600 * 24 * 14로 설정하였다.