[떡국] 트러블슈팅 _ ssr에서 페이지네이션

문제의 시작은 메인페이지에서 고명, 그외 정보들을 받는 2개의 get요청이 있는데 

처음 로직을 서버컴포넌트에서 데이터를 받아와서 클라이언트 컴포넌트에 데이터를 뿌려서 UI를 그려주게 되는데 

내떡국을 조회하려면 토큰으로 고명외 정보를 받아오고 받아온 정보에서

떡국 키값으로 고명을 조회하게 되는데 그러다보니 data fetching를 하려고 로직을 다 구현했는데 

 

이후 고명 페이지네이션을 하려다보니 페이지네이션 처리하는 로직은 클라이언트 컴포넌트였고..

화살표를 누를때마다 증가되는 번호를 어떻게 ssr에서 알아서 처리를하는지? 에 봉착해버렸다..

 

그러다보니 로직을 뒤집어 엎어야하는가? .. ..

고민을 많이하다가 구글링 도중 해당 블로그를 발견해서 구현해보기 시작했다.

https://tilnote.io/pages/61ee55ecd1de28db5e7e19ea

next ssr pagination, infinite scroll 구현하기

https://velog.io/@kimbangul/Next.js-%EC%BF%BC%EB%A6%AC%ED%8C%8C%EB%9D%BC%EB%AF%B8%ED%84%B0-%EA%B0%92-%EA%B0%80%EC%A0%B8%EC%98%A4%EA%B8%B0Next.js-13

[Next.js] 쿼리파라미터 값 가져오기(Next.js 13)

https://careerly.co.kr/qnas/1948

Next.js SSR + react-query 조합에서의 일반적인 페이지네이션 렌더링 방식

 

 

마지막 링크에 나와있는 것처럼

<PaginationPrevious href={`/${pageParam}?page=${current.page}`} onClick={prevButton} />

링크로 query param을 만들어줘서 저걸로 찾아오는걸로 로직을 구현하려했으나 

파람값이 변경될때마다 새로고침 되다보니 페이지에 보여지는 값은 초기값 1로 계속 돌아가버렸다. 

 

그래서 recoil persist를 이용하기로했다. 

 

 

문제가 발생한건 recoil에 저장은 잘 되는데 문제는 쿼리파라미터를 ssr에서 어떻게 받아오냐였다 ㅠㅠ 

 

하루종일 헤매다가 알게된건

원래 내 로직은

interface Props {
  params: {
    userId: string
  }
}

export default async function DishPage({ params: { userId } }: Props) {

이렇게 하다보니 params를 콘솔에 찍어봐도 userId만 나왔었는데 

interface Props {
  params: {
    userId: string
  }
  searchParams: {
    page: string
  }
}

export default async function DishPage({ params: { userId }, searchParams: { page } }: Props) {

query만 받아왔더니 params, searchParams라고 두가지를 확인했고 searchParams에 내가 원했던 쿼리파람값이 들어있었다 

그래서 받아온 값을 가지고 페이지를 표시하고 그 값으로 서버에 api요청으로 처리하니 원하는대로 값이 불러와졌다

다만 지금은 완성기한이 있어서 일단 ssr로 처리는 했는데 

이후 시간이 남거나 서비스배포 후 페이지네이션을 클라컴포넌트로 전환해서 어떤게 나은지 비교해볼 필요가 있을 것 같다.