The app Directory
새로운 router 방식은 app이라고 합니다. app는 pages가 남아있는 과정에서 실험적으로 채택되었습니다. 이 방식을 통해 일부 router를 새로운 방식으로 동작하도록 하고, 나머지는 이전 동작 방식을 유지할 수 있습니다.
두 파일의 경로가 충돌할 경우 에러가 발생합니다.
기본적으로 app은 React Server Components입니다. 이건 성능적으로 좋고, 사용하기 쉽지만, Client Components도 사용해야 합니다.
Folders and Files inside app
Folders : 폴더들은 경로를 규정하는데 사용됩니다. pages.js가 포함된 root 폴더에서 leaf폴더까지 계층 구조를 가지고, 이를 통해 single path를 만들어냅니다.
Files : UI를 만들고, 사용됩니다.
File Conventions
Nextjs에는 특별한 역할을 하는 파일들이 있습니다.
•
page.js : route에 특별한 UI를 만들 수 있고, public하게 접근할 수 있는 경로를 만듭니다.
◦
route.js : 서버사이드 API의 엔드포인트를 만들 수 있습니다.
•
layout.js : segment와 자식들이 공유할 수 있는 UI를 만듭니다.
◦
template.js : layout.js와 비슷하지만, 네비게이션에 새로운 컴포넌트 인스턴스가 마운트된 경우는 제외합니다. 이 경우를 빼면 layout.js를 사용하세요.
•
loading.js : segment와 children을 위한 loading UI를 만듭니다. Suspense Boundary속 페이지나 child segment로 감싸져 있으며, 해당 페이지들이 로드될 동안 로딩 UI를 노출시킵니다.
•
error.js : 로딩과 유사하게 error페이지를 띄워줍니다.
◦
global-error.js : error.js와 비슷하지만, root의 layout.js의 에러를 잡습니다.
•
not-found.js : 알 수 없음 UI를 위한 것입니다.
Component Hierachy
위에서 살펴본 파일들의 계층 구조를 설명합니다.
이를 폴더들을 첨가한다면 아래와 같이 나타납니다.
Colocation
위에서 살펴본 파일들에 추가로 여러 파일들을 폴더 속에 포함 시킬 수 있습니다. 예시로 stylesheets, tests, components 등이 있습니다.
Server-Centric Routing with Client-side Navigation
pages directory방식이 client-side routing을 사용하는 것과 달리, app directory방식은 Server Component와 서버에서 데이터 fetching을 통한 server-centric routing 방식을 사용합니다. server-centric-routing은 클라이언트가 경로 맵을 다운받을 필요가 없으며, 서버에서 해당 로직을 처리할 수 있습니다. 이러한 최적화는 많은 경로를 가진 프로그램일수록 더욱 좋습니다.
server-centric일지라도, 라우터는 client-side navigation을 Link컴포넌트와 함께 사용합니다. 이는 유저가 새로운 경로로 가도라도 브라우저가 페이지를 새로 로드할 필요가 없음을 의미합니다. 대신에 URL이 업데이트되면, Nextjs는 변화된 부분만 렌더링합니다.
추가적으로 라우터는 클라이언트 캐시에 서버 컴포넌트의 결과를 저장해둡니다. 이 캐시는 경로 세그먼트에 의해서 쪼개져서 모든 레벨에서 무효화를 허용하고, 렌더링 간에 일관성을 보장합니다. 따라서 이전에 가져온 세그먼트의 캐시를 사용해 성능을 더욱 향상 시킬 수 있습니다.
Partial Rendering
형제 경로 간 이동할 때 Nextjs는 레이아웃과 페이지를 변경된 부분만 불러냅니다. 이를 통해 중복 렌더링과 패치를 막을 수 있습니다.
