❓ Next.js에서 App Router vs Pages Router, 어떤 라우팅 방식을 선호하시나요?

[bamsurla]

안녕하세요 프론트개발하고 있는 개발자 1인입니다!

Next.js 13부터 새로운 라우팅 시스템인 App Router가 도입되었는데요, 기존의 Pages Router와 비교하여 어떤 방식을 선호하시나요?
다들 회사에서 어떤 방식으로 사용하고 있는지 궁금합니다!

🔹 App Router (app 디렉토리 기반)

• 폴더 기반 라우팅: app/ 디렉토리 내의 폴더 구조로 라우트를 정의합니다.
• 서버 컴포넌트 기본 지원: React Server Components를 기본으로 사용하여 성능 최적화가 가능합니다.
• 중첩 레이아웃 지원: layout.js 파일을 통해 중첩된 레이아웃을 쉽게 구현할 수 있습니다.

🔹 Pages Router (pages 디렉토리 기반)

• 파일 기반 라우팅: pages/ 디렉토리 내의 파일 이름으로 라우트를 정의합니다.
• 클라이언트 컴포넌트 기본 사용: 모든 컴포넌트가 클라이언트에서 렌더링됩니다.
• 전역 레이아웃 관리: _app.js와 _document.js를 통해 전역 레이아웃을 관리합니다.

[jungpaeng]

RSC가 아닌 DX가 더 편리하다는 이유로 app router를 선호합니다.

사실 'RSC가 최신 기술이라서 관심가고 사용해보고 싶다'를 제외하면, RSC가 정말 필요하고 적용할 여력을 가진 서비스는 그렇게 많지 않을 것이라 생각됩니다.

[yunsung-hodoopapa]

투표결과가 놀랍군요 앱라우터가 어떤 이점이 있는지 사실 아직 잘 체감하지 못하겠어요

[jungpaeng]

app router가 이점이 있어서 쓰는 게 아니라,
pages router는 현재 관리 모드에 돌입했다고 될 정도이고 pages router는 직관적이지 못한 부분이 많죠

[bamsurla]

다들 투표를 많이 해주셨네요!! 음 그럼 또 궁금한게, 현재 회사에 재직하고 계시면 어떤 방식을 사용하고 계신지도 궁금하네요~~

전 page router 사용중입니다 (이유는, 공통 UI 라이브러리가 emotion을 사용하기도하고,, 여러 이유들이 겹치네용)