Dynamic Route

Next.js Dynamic Route란? 

 

App router는 파일 구조로 router를 표현한다. 디렉토리는 path를, page.tsx는 UI를 나타낸다.

즉, 개발할 때 디렉토리명으로 path를 표현해야 한다.

그리고 Next.js는 Static 렌더링이 기본값이다. 이 말인즉슨 빌드 타임에 페이지가 렌더링된다는 뜻이다. 

그런데 path의 일부분이 변동되는 값이라 어떤 값이 들어올 지 정해지지 않았을 때는 path로 미리 url을 표현할 수 없을 것이다.

예를 들어, 유저 정보 페이지의 URL에 유저 id가 포함되어 있다고 한다면, 모든 유저의 id를 미리 정의해서 디렉토리로 생성해놓는 것은 불가능할 것이다. 

이럴 때 Dynamic Route를 사용할 수 있다. 즉 path에 어떤 값이 들어올 지 미리 알 수 없을 때 사용한다.

Dynamic Route 방식은 필요에 따라 3가지로 나눌 수 있다.

 

1. 일반적인 경우-디렉터리명을 대괄호로 감싼다. ex) [slug]

- app/user/[slug]/page.tsx -> /user/nightlybow23

2. 변동되는 path가 여러 개인 경우-디렉터리명을 두 개의 대괄호로 감싼다. ex) [[slug]]

- app/user/[[slug]]/page.tsx -> /user/nightlybow23/2024/may/25

3. 옵셔널하게 해당 path가 포함돼도 되고, 안 돼도 좋을 때-디렉터리명을 두 개의 대괄호로 감싸고, destructing할 때처럼 ...를 붙인다. ex) [[...slug]]

- app/user/[[...slug]]/page.tsx -> /user/nightlybow23, /user/nightlybow23/2013

 

* generateStaticParams은 Static 렌더링 + Dynamic Route 방식을 같이 사용하기 위한 함수이다. 

page.tsx에 컴포넌트 바깥에 export async function generateStaticParams로 시작하는 함수를 작성해야 한다.

아래와 같이 미리 작성해 놓으면 빌드 타임에 서버에서 미리 fetch를 수행한 후 route를 생성해 놓는다.

export async function generateStaticParams() {
    const users = await fetch(SOME_ENDPOINT)
    return users.map(user => ({
    	slug: user.id
    }))
}

 

generateStaticParams은 동일한 API 요청은 memoized되어 딱 한 번만 요청된다는 장점이 있다.

여러 페이지의 generateStaticParams끼리는 물론이고 page 컴포넌트 내에서도 동일한 API 요청을 한다면 중복 요청하지 않는다.

 

위 같은 장점들이 아니더라도 경험상, Dynamic API를 사용하지 않아 기본값인 Static 렌더링이 적용되고 있을 때, Dynamic Route 방식을 사용하려 하면 ([slug]) page.tsx에 generateStaticParams가 없다는 에러가 발생하며 페이지가 제대로 보여지지 않았다.

Static Rendering인 경우에는 반드시 generateStaticParams을 구현해야 함을 잊지 말자.