[프로젝트 돌아보기 프로젝트] 세 번째, 왜 Next.js 앱 라우터인가?

앱 라우터와 페이지 라우터의 차이점? 왜 앱 라우터를 썼나?

Next.js에는 App router와 Page router 두 가지 라우팅 방식이 있다. Page router는 기존의 방식이며, 리액트의 최신 기술인Server Component와 Suspense를 사용할 수 있는 App router가 최근에 등장했다. Next13.4부터 App router가 안정화 되었고 많은 변화가 생겼으며, 아래와 같은 자세한 차이점으로 앱 라우터를 쓰는 것이 좋다는 점을 재발견했다.

 

1. 라우팅 디렉토리 및 파일

Next.js가 파일 기반 라우팅 시스템인 점은 동일하나, 페이지 라우터의 page 디렉토리가 app 디렉토리로 바뀌었으며, _app, _document는 layout.js로 대체되었다. layout.js는 중첩된 레이아웃 사용을 편리하게 하고 코드를 단순화시켜준다. 앱라우터는 loading.js와 error.js를 제공하여 코드를 단순화 해준다.

 

2. 서버 사이드 렌더링

페이지 라우터에서는 서버 사이드 렌더링을 위해 `getServerSideProps`를 사용해야 했다. 앱 라우터는 서버 컴포넌트 기반이기 때문에 fetch와 async/await 문법을 사용해 서버 데이터를 쉽게 가져올 수 있다.

 

3. Suspense

`getServerSideProps`를 사용하면 전체 페이지가 수화(hydrate)될 때까지 애플리케이션과 상호작용이 차단된다. 그러나 앱 라우터는 리액트의 Suspense로 페이지의 일부를 선택적으로 수화하고, 다른 UI 컴포넌트를 상호작용할 수 있게 차단하지 않기 때문에 효율적으로 인터랙션이 가능하다.

  return (
    <section>
      <Suspense fallback={<p>Loading feed...</p>}>
        <PostFeed />
      </Suspense>
     <Dashboard/>
   </section>)

 

4. 발전된 fetch API 제공

앱 라우터에서 제공하는 fetch API는 caching과 revalidate를 제공한다. 데이터 요청시 캐시된 값이 있다면 api 재요청을 하지 않아도 되어 서버 부하를 감소시키고 성능을 개선시켜준다.