파일 시스템 기반 라우팅은 Next.js 의 핵심 기능 중 하나 입니다. 이전버전까지는 pages 라는 디렉토리 아래에 폴더와 파일을 규칙에 맞게 넣으면 라우팅 구조를 만들 수 있었습니다.
2022년 10월 25일에 열린 Next.js Conf 에서 소개된 Next.js 13 에서는 app 디렉토리를 기준으로 하는 라우팅인 App Router 를 제공합니다. 처음 공개할 당시(beta) 에는 app directory 라는 이름으로 소개되었으나, 13.4 이후 버전부터 App Router 라는 이름으로 변경되었습니다.
표면적으로 pages 와 app 은 유사해 보입니다. 하지만 실제로 App Router 는 React 18의 React Server Component(RSC), Suspense 를 염두한 방식입니다. (Next.js 팀은 Meta의 React 코어팀과 협력하여 React의 최신 기능을 Next.js 에 빠르게 적용했다고 밝혔습니다.)
App Router 는 Page Router 보다 구성이 간결하고 직관적인 디렉토리 구성이 가능해졌습니다.
뿐만 아니라 suspense 를 사용하여 hydration 을 컴포넌트 단위로 수행할 수 있습니다. 이를 streaming 이라고 부릅니다.
데이터가 준비되는 만큼 미리 렌더링을 수행하기 때문에 UI 렌더링 속도를 단축할 수 있습니다.
'Javascript > Next.js' 카테고리의 다른 글
| Next.js 란 무엇인가? (0) | 2023.10.19 |
|---|