[Next.js] Page Router 장단점

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
2.21) 페이지 라우터 정리

Page router 장점

1. 파일 시스템 기반의 간편한 페이지 라우팅 제공

   - pages 폴더의 구조 기반 라우팅

   - 동적 경로

   - Catch All Segment

   - Optional Catch All Segment

 

2. 다양한 방식의 사전 렌더링 제공

   - SSR : 요청을 받을 때마다 매번 새롭게 페이지 생성 -> 항상 최신 데이터 보장

   - SSG : 빌드타임에 페이지 생성

   - ISR : revalidate를 통한 페이지 재생성

      - On-Demand ISR : 페이지 재생성 트리거

Page router 단점

1. 페이지별 레이아웃 설정이 번거롭다.

type NextPageWithLayout = NextPage & {
  getLayout?: (page: ReactNode) => ReactNode;
};

export default function App({
  Component,
  pageProps,
}: AppProps & { Component: NextPageWithLayout }) {
  const getLayout = Component.getLayout ?? ((page: ReactNode) => page);

  return <GlobalLayout>{getLayout(<Component {...pageProps} />)}</GlobalLayout>;
}

   - 레이아웃을 적용하는 과정이 복잡하고, 레이아웃이 적용되길 원하는 페이지마다 설정해주어야 했다.

 

2. 데이터 페칭이 페이지 컴포넌트에 집중된다.

export const getStaticProps = async () => {
  const [allBooks, recoBooks] = await Promise.all([
    fetchBooks(),
    fetchRandomBooks(),
  ]);

  return {
    props: { allBooks, recoBooks },
  };
};

export default function Home({
  allBooks,
  recoBooks,
}: InferGetStaticPropsType<typeof getStaticProps>) {
...

   - 데이터를 컴포넌트에게 props의 형태로 전달해줘야 했었는데, 많이 자식 컴포넌트가 방대하다면 이 props를 모두 전달해주어야 한다.

 

3. 불필요한 컴포넌트들도 JS Bundle에 포함된다.

   - 불필요한 컴포넌트들이란, 상호작용이 필요없는 컴포넌트를 의미한다.

   - 이미 사전렌더링을 통해 생성된 컴포넌트들중 상호작용이 필요없는 컴포넌트들은 후속으로 받게될 JS Bundle에 포함될 필요가 없다.

      - 따라서 그러한 컴포넌트들이 번들에 추가되면서 Bundle의 용량이 불필요하게 커지며, 하이드레이션이 완료되는데 걸리는 시간도 오래걸린다.