Parallel Route (병렬 라우팅)
- 한 페이지 안에, 하나의 레이아웃 안에 여러 작은 페이지를 렌더링하고 싶을 때 사용한다. '여러 작은 페이지'는 <article>처럼 분리 가능한 구획이라고 생각하면 되겠다. Next.js에서는 이것을 'slot'이라고 부른다.
- 동시에 렌더링하기 때문에, fetch와 같은 네트워크 콜로 인한 waterfall을 방지할 수 있다.
ex) 부모 컴포넌트에서 fetch를 호출하면, 자식 컴포넌트들 중 해당 fetch와 관계 없는 컴포넌트들도 부모의 fetch가 끝날 때까지 기다려야 렌더링이 된다. Next.js의 병렬 라우팅을 사용하면 '동시에' 렌더링되기 때문에 컴포넌트들을 관심사에 따라 분리할 수 있다.
- 문법은 부모 페이지 하위에 디렉토리를 생성한 후 디렉토리명 앞에 @를 붙인다. 디렉토리 하위에는 page.tsx가 있어야 한다. 부모 컴포넌트 하위에 layout.tsx에 slot을 children와는 별도로 렌더링한다.
ex) app/dashboard/@user/page.tsx
- 위 path에서 @user는 실제 url로 만들어지지는 않는다. => localhost:3000/dashboard로 접근할 수 있다.
- 각 slot에 하위 페이지를 생성할 수 있다. 탭 이동에 용이하다. 생성 방법은 하위에 디렉토리를 만들면 되는 식으로 app router 기본 방식과 동일하다.
- default.js 란?
어떤 페이지 안에 A slot과 B slot이 있고 A slot 하위에 a 페이지와 b 페이지를 탭으로 생성했다. 디렉토리 형태는 아래와 같을 것이다.
- parentPage
- @A
- a
page.tsx
- b
page.tsx
- @B
layout.tsx
page.tsx
정상적(?)인 루트대로 pageParent에 접근하고, A slot에서 b 탭을 클릭하면 b 탭은 'active'하게 된다. 이 때 @B는 별다른 행위를 취할 필요 없이 pageParent에 접근했을 때 렌더링했던 대로 있게 된다.
하지만 만약 이 상태에서 새로고침을 하게 되면 어떻게 될까? path는 `parentPage/b`가 된다. 어쨌든 페이지는 `pageParent`이므로 @A와 @B를 모두 렌더링한다. 그런데 path는 `parentPage/b`, 즉 b가 포함되어 있으므로 각 slot은 하위 페이지를 찾아서 렌더링해야 한다. @A는 문제가 없지만 @B에는 b 페이지가 없으므로 문제가 된다. 이 때 default.js를 만들어서 @B 하위에 넣어두면 이럴 때 렌더링할 fallback을 지정해둘 수 있다.
'프론트엔드 > Nextjs' 카테고리의 다른 글
Dynamic Route (0) | 2025.01.08 |
---|---|
서버 렌더링 (0) | 2025.01.07 |
1. 프로젝트 생성과 디렉토리 구조 (0) | 2023.12.25 |