Next.js 의 Parallel Routes에 대해 들어보셨나요? Parallel Routes 는 Next.js 13버전 에서 도입된 새로운 기능입니다. 기존 Next.js 라우팅 기능에 추가된 개념으로, 여러 경로를 동시에 또는 조건에 따라 렌더링 할 수 있게 합니다.

Parallel Routes의 이점

1. 부분적 UI 업데이트: 웹 페이지의 특정 부분만을 변경하고 싶을 때, 예를 들어 사이드바나 탭에서 선택된 내용에 따라 메인 콘텐츠를 업데이트하고자 할 때 유용합니다.

2. 페이지 로딩 시간 최적화: 전체 페이지를 다시 로드하지 않고 필요한 부분만 업데이트함으로써 페이지 로딩 시간을 단축할 수 있습니다.

3. 동적 라우팅 구현: 다양한 URL 경로에 대응하는 다양한 페이지 레이아웃이나 콘텐츠를 효율적으로 관리합니다. 예를 들면 웹뷰를 구현할때 상세 페이지 이후 뒤로가기 시 스크롤 유지나 필터값 설정을 그대로 유지할수 있습니다.

내부 구현: Slot 개념

• Slot 사용: 'slot'이라는 개념을 통해 구현됩니다. layout.tsx에 컴포넌트를 {children} 영역에 배치하고, URL에 따라 추가 뷰를 그립니다.

• Named Slots: @folder 규칙을 사용하여 슬롯을 정의하고, 같은 레벨의 레이아웃에 props로 전달합니다.

  
  

그렇지만 Parallel Routes는 Next.js 13.3에서 도입된 최신 기능으로, 초기 단계의 기능으로 다양한 이슈가 존재합니다. Next.js의 공식 GitHub 레포지토리에서 관련 이슈를 검토하고 프레임워크가 제공하는 기능의 이점과 직접 구현에 따른 복잡성 사이의 균형을 고려하여 실무에서의 도입 여부를 결정하는 것을 추천드립니다.