Parallel Route의 필요 이유

Next.js를 사용하는 사람들이라면 Parallel Route를 모두 알 거라고 생각한다.

이에 내가 공부한 Parallel Route를 이 글에 정리해보겠다.

 

Parallel Route를 알기 위해선 먼저 그 정의에 대해 알아야 한다.

Parallel Route는 병렬적인 라우트를 뜻하며, 하나의 페이지에서 2개 이상의 route를 동시에 렌더링 하는 구조이다.

---

구현 방식

Parallel Route를 구현하는 방식은 매우 간단하다.

1. 폴더 앞에 @를 붙여 생성한다. 그렇게 되면 그 폴더는 slot라는 뚫려있는 빈 구멍이 된다.

2. slot 폴더 하위에 루트처럼 page.tsx를 선언한다.

3. 이렇게 하면 기본 URL(루트 페이지)에 각 slot 하위의 페이지들이 같이 나타난다.

4. 상위에 있는 layout.tsx에서 slot 이름을 기준으로 페이지 컴포넌트들이 props로 전달된다.

이러한 slot는 대시보드와 같이 각각 독립적으로 렌더링이 되는 기능이 필요한 곳에서 주로 사용된다.

기본적으로 dynamic 렌더링이 된다.

 

---

그렇다면 굳이 slot를 써야 할까? 그냥 slot 말고 컴포넌트로 나눠서 사용하면 안 되는 걸까?

UI 구성만 보면 컴포넌트로 구현해도 전혀 상관이 없다. 하지만 최적화와 상태관리까지 고려한다면 말이 달라진다.

Parallel Route의 필요성

Parallel Route는 loading.tsx, error.tsx, state 관리를 route segment와 동일한 방식으로 처리해 준다.

(이 최적화는 Next.js 내부에서 자동으로 수행된다.)

 

하지만 route segment는 아니다. 이게 무슨 뜻일까?

route segment는 url이 변경되지만 Parallel Route는 url이 변경되지 않는다.

그럼에도 route segment와 동일한 fetch cache 최적화를 적용받는다.

👉 그렇기 때문에

URL은 유지하면서 route 단위 최적화를 받고 싶을 때 Parallel Route를 사용해야 한다.