Pararell Routes

Next.js 13버전 이후 등장한 App Router에서는 기존 페이지 기반 라우팅 방식에서, Pararell Routes 기능을 추가로 제공한다. 이 기능을 활용하면 여러 레이아웃과 페이지를 동시에 로딩할 수 있어 성능 및 UI에서의 이점이 있다.

1. Pararell Routes란?

Parallel Routes는 하나의 레이아웃 안에서 여러 개의 독립적인 섹션을 동시 렌더링할 수 있도록 도와주는 기능이다. 기존에는 특정 페이지의 데이터가 모두 준비될 때까지 기다려야 했지만, Parallel Routes를 사용하면 개별적인 경로를 병렬로 로딩할 수 있어 UX가 개선된다.

2. 사용법

Parallel Routes는 @slot을 사용해 설정할 수 있다. layout.tsx 파일에서 특정 영역을 병렬로 로딩하도록 설정하면 된다.

병렬 경로 파일 구조

/app
 ├── layout.tsx
 ├── page.tsx
 ├── @sidebar
 │   ├── layout.tsx
 │   ├── page.tsx
 │   ├── loading.tsx
 │   └── error.tsx
 ├── @header
 │   ├── layout.tsx
 │   ├── page.tsx
 │   ├── loading.tsx
 │   └── error.tsx
 ├── @footer
 │   ├── layout.tsx
 │   ├── page.tsx
 │   ├── loading.tsx
 │   └── error.tsx

app/layout.tsx

import { ReactNode } from 'react';

type LayoutProps = {
  children: ReactNode;
  sidebar: ReactNode;
  header: ReactNode;
  footer: ReactNode;
};

export default function Layout({ children, sidebar, header, footer }: LayoutProps) {
  return (
    <div className="flex flex-col h-screen">
      <header className="h-16 bg-gray-200">{header}</header>
      <div className="flex flex-1">
        <aside className="w-72 bg-gray-300">{sidebar}</aside>
        <main className="flex-1">{children}</main>
      </div>
      <footer className="h-10 bg-gray-400">{footer}</footer>
    </div>
  );
}

app/@sidebar/loading.tsx

export default function Loading() {
  return <div className="p-4 text-gray-500">사이드바 로딩 중...</div>;
}

app/@sidebar/error.tsx

export default function Error() {
  return <div className="p-4 text-red-500">사이드바를 불러오는 중 오류가 발생했습니다.</div>;
}

각 병렬 라우트(@sidebar, @header, @footer)에 loading.tsx와 error.tsx를 추가하면, 해당 영역이 로딩 중이거나 오류가 발생했을 때 적절한 UI를 제공할 수 있다.

3. 활용 사례

1. 대시보드

대시보드에서 여러가지의 실시간 데이터를 다루는 경우 동시에 로딩하여 빠른 응답성을 보여줄 수 있다.

2. 채팅

채팅 화면과 친구 목록을 병렬로 로딩하면, 친구 목록의 로딩이 지연되더라더 채팅은 바로 사용할 수 있다.

3. 관리자 페이지

메인 콘텐츠와 사이드바의 데이터를 분리하여 로딩 시간 최적화가 가능하다.