Next 24장 - dynamic routes

Next

dynamic routes

• 커뮤니티 페이지를 만들던 중 페이지네이션 구현을 위해 page params가 필요해졌다.
• 14버전에서는 getServerSideProps... 와 같은 함수를 사용하지 않기에 params를 가져올 여러 방법을 고민했다.

시간 낭비 (1)

• SSR을 유지하며 페이지 네이션을 구현하고 싶었기에 (게시글 목록 - 서버),(페이지 네이션 - 클라이언트)를 중점으로 고민하였는데, 페이지네이션을 클라이언트 컴포넌트로 구현할 경우 state, effect를 사용해야 했고, useRouter, useSearchParams를 사용하여 path가 변하는 경우에 따라 리렌더링 되도록 해보았다.
• 이 경우 페이지가 path에 따라 페이지네이션이 이루어져야 하기 때문에 처음 SSR로 로드된 파일 목록과 useEffect를 사용할 파일 목록(path에 따라 CSR)이 동시에 발생하게 됐다.
• 페이지 번호에 따라 조건부 렌더링을 해야할지 의문…

...
export default function Page(){
  const {data} = getFetch()

  return <div>{data.map(i => <List {...i}/>)}</div>
}
// List
export default function List(data:...){
  const [data, setData] = useState(data);
  const path = useSearchParams().get("page");

  useEffect(() => {
    setData(...)
  },[path]) // List 항목이 처음 렌더링 되며 fetch 요청이 다시 일어남

  return (<div>{...}</div>)
}

시간 낭비 (2)

• http:// ... /...?page=1
• next 패키지 중 getServerSidePropsContext를 사용한다.
• context 안에는 { params: {...} , searchParams: { page : 1}}와 같은 값이 들어있는데 type을 보아도 searchParams라는 속성이 없고, 속성을 사용하려고 하면 당연히 에러가 뜬다.

import { GetServerSidePropsContext } from "next";

export function getParams(context: GetServerSidePropsContext) {
  console.log(context);
}

export type GetServerSidePropsContext<
  Params extends ParsedUrlQuery = ParsedUrlQuery,
  Preview extends PreviewData = PreviewData
> = {
  req: IncomingMessage & {
    cookies: NextApiRequestCookies
  }
  res: ServerResponse
  params?: Params
  query: ParsedUrlQuery
  preview?: boolean
  previewData?: Preview
  draftMode?: boolean
  resolvedUrl: string
  locale?: string
  locales?: string[]
  defaultLocale?: string
}

이게 정론인 듯

• 꽤나 간단한 해결책이 있었는데 dynamic routes를 사용하는 것이다.
• /example/[...page]/page.tsx를 사용하면 별다른 코드 없이 page 번호를 쉽게 가져올 수 있다.
• 이러면 페이지가 변할 때마다 data fetching (async function getFetch)가 다시 실행되며 페이지에 해당하는 데이터를 받아올 수 있다.

export default function Page({
  params: { page },
}: {
  params: { page: string },
}) {
  console.log(page);
}

고민해야할 부분

• 페이지네이션에 따른 데이터를 가져옴에 있어, 페이지 번호에 따라 새로운 페이지를 그려 보여주는 것이 나을지, 첫 로드는 서버에서 실행하고 이후 페이지가 변함에 따라 클라이언트 측에서 데이터를 다시 받아올지에 대한 고민.
• 페이지를 다시 그려내는 것보다 클라이언트 측에서 데이터만 바꿔서 보여주는 것이 좀 더 효율적이지 않을까 하는 고민 (예정)