정적 라우팅과 동적 라우팅 slug, generateStaticParams

1. 정적 라우팅

이미 고정된 것, 빌드 할때 정적 페이지 생성. 서버에 요청할 필요 없이 바로 해당 페이지에 접근.

사전에 미리 만들어두고 클라이언트에서 접속하면 html 보내줌.

다음 요청부터는 서버까지 가지 않아도 cdn에 캐쉬된 html파일을 빠르게 가져올 수 있음.

단점) 데이터가 정적임 -> 데이터가 가변적인 웹사이트라면 안좋음.

        사용자별 정보 제공의 어려움

 

 

2. 동적 라우팅

골격은 같지만, 키워드별로 해당하는 것(다른 부분)을 보여주는 것이라고 생각.

사용자가 특정 페이지에 접근할 때 해당 페이지가 생성.

넥스트는 props에 params를 사용해서 slug에 어떤 경로가 왔는지 알려줌.

 

* slug

slug를 사용하면 동적으로 결정되기 때문에 빌드할때는 slug페이지는 만들어지지 않음.

골격은 미리 pre-rendering 되어있지만, 동적인 것(특정 데이터)은 요청할 때 동적으로 생성해서 보내줌. (페이지를 미리 만들어 둘 수 없음.)

[slug]
[...slug] :중첩된 경로들도 받아옴
[[...slug]] : optional, slug가 있어도 없어도 됨

 

 

3. generateStaticParams

동적 라우팅을 사용하는 페이지 중에서 특정 페이지만 미리 생성.

그 페이지에서 어떤 경로에 한해서 페이지를 미리 만들어두기 원하는지 명시.

 

만약 generateStaticParams를 하지 않으면 사용자가 요청할때 생성해서 전달.
generateStaticParams를 했으면 명시한 것들은 빌드할때 "미리" 만들어두는 것