[Next.JS] parallel routes interception 트러블 슈팅

병렬라우팅 이란?

NextJS 는 병렬라우팅 이라는 것을 지원하는데 아래 사진과 같이 독립적인 컴포넌트를 서버에서 해석하여 클라이언트로 내려주는 형태이다.

동시에 하나 이상의 페이지를 렌더링할 수 있게 해주며 대시보드나 소셜 사이트 피드와 같은 동적인 앱 섹션에서 병렬라우팅을 사용하여 복잡한 라우팅 패턴을 구현 할 수 있다.

 

독립적으로 스트리밍되는 각 경로에 대해서 오류, 로딩 상태를 정의할 수 있다.

 

또한 인증 상태와 같은 특정 조건부에 따라서 슬롯을 렌더링할 수 있도록 지원한다. 

이를 통해서 동일한 URL 이지만 완전히 분리된 코드를 사용할 수 있게 지원해준다.

 

---

 

프로젝트 설명

현 프로젝트에서는 모달창을 띄울 때와 서로 독립적인 데이터를 가진 레이아웃을 렌더링할 때 사용한다.

모달창

Client-component 일 때는 하나으 페이지에서 다른 컴포넌트를 렌더링하는 식으로 진행을 했었지만,

parallel routes 를 통해 동시에 기존 페이지와 이벤트, 이력서 승인 모달페이지를 동시에 띄울 수 있었고,

인터셉팅 라우트를 사용해서 경로는 /admin/resumePending/[id] 으로 이동하지만 parallel routes 안에 있는 (.)resumePending/[id] 으로 훔치게 된다.

 

layout.tsx 에서 children 을 통해 보여지는 것이 아닌 modal 을 통해서 렌더링되는 것이다.

 

모달창 같은 경우는 초기에는 Client-Side 에서 렌더링되었지만 서버에서 렌더링하면 좀 더 빠르고 uri 을 이동시켜야했고 하나의 페이지도 만들지만 동시에 모달창도 만들고 싶어서 위와 같이 진행했다. 

 

또한 children 안에서 /admin/resumePending/[id] 클릭시 들어갔을 때 모달창이 실행되고 직접 입력하거나 새로고침을 했을 때는 /admin/resumePending 페이지가 보여지게 된다. 

 

추후 이벤트를 추가적으로 생성을 할 것이기에 이벤트 생성 페이지가 필요했고, 이력서 승인페이지는 이력서를 꼼꼼히 살펴 승인/반려 를 해야하기에 하나의 페이지를 지원하는 것을 원했다.

 

---

마이페이지

 

profile 에서는 색깔별로 서로 독립적인 데이터 (본인정보수정, 포인트, 승인이력서, 판매이력서) 를 가지고 있는 컴포넌트였기에 이를 분리해도 상관이 없었고 admin 페이지와 마찬가지로 페이지를 생성하고 싶었다.

 

서버 스펙이 나쁘지 않았기에 Client-side 에서 실행하기 보다는 서버에서 내려주는게 좀 더 이점이 될 것 같아 병렬라우팅을 선택하게 되었다.

 

모달창을 고민을 많이하였는데 headless-ui Transition, Dialog 로 모달창을 띄우는 구조였는데 클라이언트에서 돌아갔을 때 ux가 좀더 괜찮아서 고민을 하였지만 주문이력서는 페이지 지원이 필요했고 판매이력서는 수정을 해야하는 상황이 있을 수 있는데 이 때 모달창에서 하기 보다는 하나의 페이지에서 하는게 좀 더 괜찮아 보여서 사용하게 되었다.

 

 

---

트러블 슈팅

지금까지 보면 "Client-side 에서 해도 괜찮을 것 같은데?" 라는 생각이 들 수 있다. 나 또한 그랬다. 

 

 

• 1. 모달창 구현
  • 향상된 사용자 경험: 이전에는 클라이언트 측에서 모달창을 렌더링했지만, 병렬 라우팅을 통해 서버 측에서 렌더링하여 더 빠른 로딩 속도와 향상된 사용자 경험을 제공합니다.
  • URI 유지: 모달창이 띄워져도 기존 페이지 URI가 유지되어 사용자 혼란을 방지하고 북마크 및 공유 기능을 용이하게 합니다.
  • 독립적인 코드 관리: 모달창은 별도의 페이지로 관리되어 코드 분리성을 높이고 유지 관리를 용이하게 합니다.
  • 다양한 모달 유형 지원: 이벤트 생성, 이력서 승인 등 다양한 모달 유형을 쉽게 구현할 수 있습니다.
  2. 독립적인 데이터 레이아웃 구현
  • 개별 데이터 관리: 프로필 페이지에서 본인 정보 수정, 포인트, 승인 이력서, 판매 이력서 등 서로 독립적인 데이터를 가진 컴포넌트를 분리하여 관리합니다.
  • 향상된 유연성: 각 데이터 컴포넌트를 독립적으로 렌더링하여 레이아웃을 자유롭게 구성하고 필요에 따라 재사용할 수 있습니다.
  • 개선된 코드 가독성: 코드 분리가 코드 가독성을 높이고 유지 관리를 용이하게 합니다.
  • 성능 최적화: 서버 측 렌더링을 통해 각 데이터 컴포넌트에 필요한 데이터만 로드하여 성능을 최적화합니다.
  3. 서버 측 렌더링 활용
  • 빠른 로딩 속도: 서버 측에서 HTML을 렌더링하여 초기 페이지 로딩 속도를 크게 향상시킵니다.
  • 간편한 코드 작성: 클라이언트 측 로직 없이도 서버 측에서 데이터를 처리하고 UI를 렌더링할 수 있습니다.
  • 코드 분리: 클라이언트 측 코드와 서버 측 코드를 분리하여 코드 관리를 용이하게 합니다.
  4. 인터셉팅 라우팅 활용
  • 모달창 URL 관리: /admin/resumePending/[id] 와 같은 URL로 모달창을 호출하면서 실제 렌더링되는 경로는 (.)resumePending/[id] 로 설정하여 URL 구조를 명확하게 유지합니다.
  • 조건부 렌더링: 인증 상태와 같은 특정 조건에 따라 슬롯을 렌더링하여 사용자 맞춤형 경험을 제공합니다.
  • 코드 재사용: 동일한 URL이지만 완전히 분리된 코드를 사용하여 코드 재사용성을 높입니다.

profile, admin 이기에 인증을 거친 후 접근이 가능한 페이지여서 SEO 이점을 챙기지 못하는 것이 마음이 아팠지만 위와 같은 이점을 챙겼기에 괜찮다고 생각한다.

 

병렬라우팅의 이점을 살펴봤는데 굉장히 효율적이고 좋은 라우팅 기법인 것 같다.