Dynamic Route
Dynamic Route
Next.js는 기본적으로 pre-render
를 수행하기 때문에 동적 라우팅(외부 데이터에 의존하는 경로) 페이지인 경우에도 getStaticPaths
와 getStaticProps
를 활용하여 정적페이지로 생성할 수 있다.
이렇게 하면 Next.js에서 동적 URL이 활성화 된다.
동적 라우팅 페이지를 정적페이지로 생성하는 방법
pages
디렉토리안에서[id].js
페이지를 생성 ([]
는 next.js의 동적 경로)getStaticPaths
를 활용하여 동적 라우팅할 페이지 리스트를 지정getStaticProps
를 활용하여id
가 있는 게시물에 필요한 데이터를 가져온다.
getStaticPaths
- 동적 라우팅 페이지를 구현할때 정적페이지(
getStaticProps
을 사용하는 경우)로 만들려면 필수로 사용 - 반환값으로
paths
와fallback
을 포함하는 객체를 반환해주어야 한다. - development환경에서는 모든 요청에서 실행되고 production환경에서는 빌드에서 실행됨
export async function getStaticPaths() {
return {
paths: [
{ params: { id: '1' } },
{ params: { id: '2' } },
{ params: { id: '3' } },
],
fallback: false,
}
}
paths
pre-render
를 수행해야 하는데 동적 라우팅은 어떤 페이지를 미리 만들어야 할지 모르므로paths
에 미리 지정을 해줘야 한다.{ params: { id: xx} }
형식의 객체 배열 형태- 객체에는
params
키가 있어야 하고id
키가 있는 객체를 포함해야 한다. - 동적 라우팅 페이지를 모두
pre-render
로 구현하는 것은 사실상 어려운 일이므로paths
에 어느정도 제한을 두어야 한다.
fallback
paths
이외의 경로들에 대해 추후 요청이 들어올 때 만들어 줄지(true) 404 page를 띄울지(false) 설정fallback: true
로 지정하면path
에 현재 경로가 없는 경우 현재 경로에 해당하는 데이터를 (getStaticProps
설정한 부분을 실행) 서버로부터 불러와 화면에 그려준다.- 이때 next.js는 빈 데이터인
dummy pre-render
를 수행하게 되는데 이 경우 페이지가 로드중임을 사용자에게 알려야 한다. 이 때 사용하는것이 `route.isFallback. route.isFallback
을 설정하지 않으면 외부데이터를 사용하는 코드에서 데이터가 누락되므로 예외가 발생할 수 있다.- 페이지가 렌더링되고나서 만들어진 HTML을
.next/server/pages
에 저장하게 되는데 이미 저 경로에 만들어진 페이지가 있다면 이미 있는 결과물을 반환하게 된다.(캐시된 페이지를 사용하므로next build
전까지 업데이트가 되지않음)
const post () => {
const router = useRouter();
if (router.isFallback) {
return <div>로딩중...</div>
}
}
fallback: 'blocking'
fallback: true
와 비슷하지만dummy pre-render
를 수행하지 않는다.- 대신 페이지가 처음으로 렌더링될때까지 브라우저가 중단된다.
- 첫 요청 이후에는
fallback: true
와 마찬가지로 캐시에서 빠르게 제공된다.
Catch-all Routes
[...id].js
와 같이 대괄호에 '...'를 붙이게 되면 모든 경로를 포착하도록 동적 경로를 확장한다.pagesposts[...id].js
는/posts/a
,/posts/a/b
,/posts/a/b/c
와 같이 매치된다.getStaticPaths
에id
값으로 배열을 넣어줘야 하고getStaticProps
에params.id
는 배열이 된다.
return [
{
params: {
// Statically Generates /posts/a/b/c
id: ['a', 'b', 'c']
}
}
//...
]
export async function getStaticProps({ params }) {
// params.id === ['a', 'b', 'c'];
}
Author And Source
이 문제에 관하여(Dynamic Route), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jtwjs/Dynamic-Route저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)