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을 구현해야 함을 잊지 말자.
'프론트엔드 > Nextjs' 카테고리의 다른 글
| 서버 렌더링 (0) | 2025.01.07 |
|---|---|
| Parallel Route (0) | 2025.01.07 |
| 1. 프로젝트 생성과 디렉토리 구조 (0) | 2023.12.25 |
