NextJS를 이용한 웹사이트 개발일지 (app 라우터와 pages 라우터의 의미와 장단점)
스코드 초대를 중계하는 사이트를 만들기 위해
NextJS를 이용하여 웹 개발을 시작했습니다.
하지만 얼마 못가서
app 디렉토리와 pages 디렉토리를 중심으로 문제 생겼고 진짜 개고생을 했는데요!
그 사이에서 깨달은 정보와 해결방법에 대해 포스팅을 시작해보겠습니다!
app 라우터와 pages 라우터의 의미와 장단점
(장단점에 대해 먼저 알고싶으면 챕터 3을 먼저 보세요! )
1. app router 란 무엇일까?
파일시스템 기반 라우터이며 v13버전부터 추가된 라우팅 방식입니다.
경로는 아래와 같이 폴더를 경로로 이용하며
해당 경로의 내용은 page.tsx에 작성합니다.
app
└── path name (경로 이름)
└── page.tsx
그리고 React의 최신기능과 중첩, 그룹 ,평행 경로를 지원합니다.
또한 react suspense와 같은 것을 이용할 수 있습니다.
1-1. 중첩, 그룹, 평행 경로가 무엇일까?
중첩 경로는 app에서의 경로를 의미합니다.
(app > path name > page.tsx)
그룹 경로는 소괄호로 둘러싼 이름의 폴더(경로)를 의미하며 url 경로에는 노출 시키지 않고
경로를 묶고 싶을때(특정 경로를 유지하고 싶을 때) 사용합니다.
( EX. app > (path name1) > path name1-1 > page.tsx )
( EX. app > (path name1) > path name1-2 > page.tsx )
평행 경로는 폴더(경로)의 이름 앞에 @을 붙인 것을 의미하며 해당 경로는 하나의 화면에서
1개이상의 페이지를 병렬로 랜더링할 수 있습니다.
(app > @path name > page.tsx)
(@이 붙여진 경로는 url에 영향을 주지 않습니다!)
2. pages router란 무엇일까?
v13이전 버전에서 사용한 라우팅 방식으로 현재까지 지원합니다.
경로는 아래와 같이 파일을 경로로 읽어들입니다.
pages
└── page_name.tsx
이렇게 두가지의 라우팅 방식을 간단히 알아보았는데요.
이제 각각의 장단점을 알려드리겠습니다.
3. app router와 pages router의 각각의 장단점
3-1. app router
최신 react 기능을 사용할수있습니다.
pages router보다 더 많은 유연성을 제공합니다. ( ex. 그룹 및 평행 경로 )
대규모 어플리케이션이나 동적 페이지에 더 적합합니다.
페이지간의 구성요소를 공유하는데 더 좋습니다.
웹개발의 새로운 아키텍쳐를 제공합니다.
비교적 좀 많이 어렵습니다 ( 특히 pages에서 넘어올때 )
비교적 학습해야하는 부분이 많습니다.
3-2. pages router
이해하고 사용하는데 상대적으로 쉽습니다.
소규모 웹에 적합합니다.
단순하고 직관적인 라우팅을 제공합니다.
정적 페이지에 적합합니다.
파일구조에 따라 자동으로 라우팅 됩니다.
app 라우터에 비해 제한된 유연성을 제공합니다.
대규모 웹일 경우 유지관리가 어렵고 더욱 복잡한 라우팅을 구성해야할수도 있습니다.
페이지간 구성요소를 공유하기 어렵습니다.
그래서 어떤 것을 선택해야할까?
저는 위의 장단점을 참고하여
동적 페이지인가, 정적페이지인가 또는
규모나 복잡성은 어떻게 되는가를 기준으로
결정을 내리는 것을 추천합니다.
또한 app router는 상대적으로 호불호가 갈린다는 평이 있을정도로
기존 pages와 형태가 달라진것이 체감이 되었습니다.
옮기실때 많은 부분에서 공식 문서를 참조해야할 일이 발생할 수도 있습니다.
하지만
꼭 둘중 하나만 선택하여 개발해야한다는 것은 아닙니다.
중심으로 개발할 디렉토리를 결정하는 것 이외에
두 방법을 적절히 사용하며 동적페이지는 app router로 정적 페이지는
pages router로 진행하는 것 또한 필요해보일 것으로 보입니다.