[next.js]Parallel Route ,Intercepting route

Parallel Route (병렬 라우트)

• 하나의 화면에 여러개의 페이지 컴포넌트들을 동시에 렌더링하는 라우팅 패턴
• 복잡한 구조의 애플리케이션을 구축할 때 유용
• 예시
  
  • 소셜 미디어 서비스 (예: 왼쪽 사이드바, 중앙 피드, 오른쪽 알림 창을 병렬로 표시)
  • 관리자의 대시보드 (예: 메뉴, 콘텐츠 영역, 상태 표시창 등을 동시 렌더링)

 

slot(슬롯)

• 병렬로 렌더링될 페이지 컴포넌트를 보관하는 폴더

• URL 경로에는 아무런 영향을 미치지 않으며, 라우트 그룹과 비슷한 역할을 함

export default function Layout({
  children,
  sidebar,
  feed,
}: {
  children: ReactNode;
  sidebar: ReactNode;
  feed: ReactNode;
}) {
  return (
    <div>
      <div>
        <Link href={"/parallel"}>parallel</Link>
        &nbsp;
        <Link href={"/parallel/setting"}>parallel/setting</Link>
      </div>
      <br />
      {sidebar}
      {feed}
      {children}
    </div>
  );
}
// sidebar, feed, children 병렬적으로 구성

• 새로고침시 캐싱이 사라지며 404에러가 발생할 수 있음
  => 서버에서 병렬 라우트와 관련된 경로를 적절히 설정하거나, CSR 방식으로 새로고침 문제를 해결해야 함

export default function Default() {
  return <div>/parallel/default</div>;
}

 

Intercepting route (인터셉팅 라우트)

• 사용자가 동일한 경로에 접속하더라도 특정조건에 따라 원래의 페이지 대신 다른 페이지를 렌더링하는 기술
• 폴더 구조에 (.)을 추가하여 특정 폴더나 파일을 가로챌 수 있음
• 예 : app/(.)posts/[id]/page.tsx

export default function InterceptedPage() {
  return <div>이 페이지는 인터셉트되었습니다!</div>;
}

• 활용
  • 사용자 인증: 로그인 상태에 따라 접근하려는 경로를 인터셉트하여 로그인 페이지로 리다이렉션
  • A/B 테스트: 사용자 그룹에 따라 다른 콘텐츠 제공
  • 동적 컨텐츠 로딩: 특정 조건에 따라 데이터를 불러오고 다르게 렌더링

병렬 라우트 & 인터셉팅 라우트 활용 예제

• 예시 : 소셜 미디어 앱 구조
  • 병렬 라우트로 피드, 알림, 프로필 사이드바를 동시에 렌더링
  • 로그인하지 않은 사용자일 경우 인터셉팅 라우트를 사용하여 로그인 페이지로 이동

export default function Layout({
  children,
  sidebar,
  feed,
}: {
  children: ReactNode;
  sidebar: ReactNode;
  feed: ReactNode;
}) {
  return (
    <div>
      {sidebar}
      {feed}
      {children}
    </div>
  );
}

export default function LoginIntercept() {
  const isAuthenticated = false; // 예제 로직
  if (!isAuthenticated) {
    return <div>로그인이 필요합니다!</div>;
  }
  return <div>사용자 컨텐츠</div>;
}