Next.js에서 Slug 활용하기 & Shallow Routing

라우팅

• Next js에서는 File system을 기반으로 라우팅이 된다.
• File system은 pages폴더 아래 있어야하며 src/pages/ 와 pages/ 가 있다면 후자가 우선순위.

 

slug 파일

wild card처럼 다양한 값을 받을수 있는데, 하나의 파일로 여러 파일을 대체할 수 있다.

1. [slug]

pages / category / [slug].js; 
// http://www.~~~~.com/category/:slug 와 같음

2. [...slug]

단 한개의 route를 커버하는게 아니라 하위 route를 모두 커버 가능하다.

나중에 useRouter의 query메소드로 가져오면 배열을 반환받을 수 있다.

pages / category / [...slug].js; 
// http://www.~~~~.com/category/:slug/:slug/:slug...... 와 같음

3. [[slug]].js

폴더구조 상 category/1 처럼 맨 뒤의 숫자가 동적 라우팅 부분이고 category에는 대응하는 index파일이 없다면?

=> 404 not found 에러가 뜬다.

그러나 category 디렉토리에 index를 굳이 주지 않고도 동적라우팅과 기본 인덱스 페이지까지 모두 커버하고 싶을 때 [[slug]]를 쓴다.

pages / category / [slug].js; 
// http://www.~~~~.com/category 로 접근하면 404에러
pages / category / [[slug]].js; 
// category아래 index파일이 없더라도 http://www.~~~~.com/category 로 접근가능.

 

 

slug 값의 활용

useRouter 훅을 이용하여 slug를 불러올 수 있다.

useParams나 useLocation 훅에 대한 사용경험이 있다면 바로 이해가 갈 것이다.

import { useRouter } from 'next/router';
const router = useRouter();
const { slug } = router.query;

▶️ slug와 queryString이 모두 있는 경우

ex) category/food?from=event

에서 slug인 food와 from이라는 queryKey를 모두 가져올 수 있다.

import { useRouter } from 'next/router';
const router = useRouter();
const { slug, from } = router.query;

// slug=food
// from = event

▶️ query에 'slug'라는 key가 있는 경우

ex) category/food?slug=event

pages 안의 [slug]가 우선시 된다.

import { useRouter } from 'next/router';
const router = useRouter();
const { slug } = router.query;
// slug=food (o)
// slug=event (x)

▶️ 다중 slug의 경우?🤔

ex) 파일구조 => pages/[username]/[info].js

여러 개의 슬러그들이 있을 때, 이를 모두 불러올 수 있다.

import { useRouter } from 'next/router';
const router = useRouter();
const { username, info } = router.query;

2. [...slug]

ex) 파일구조 => pages/cart/[...slug].js

구조분해할당으로 된 다중 슬러그는 배열로써 불러와진다.

import { useRouter } from 'next/router';
const router = useRouter();
const { slug } = router.query;
// slug는 배열로 반환

 

 

✅ 페이지간의 이동

1. Link

<Link href='url'>url로가기</Link>

2. router.push

router.push('url'); // 프로그래밍적인 접근 방식

 

✅ Shallow Routing

getServerSideProps / getStaticProps등을 다시 실행시키지 않고, 현재 상태를 잃지 않은 상태로 url을 바꾸는법.

(페이지를 바꾸지 않고 query만 업데이트하는 방법이다.)

 

상황
사용자가 어떤 동작을 했고, 그 기록을 query로 남기고 싶을때
(query로 남기면 사용자가 새로고침을 해도 유지되는 장점이 있다.)

 url이 바뀌었다고 페이지가 처음부터 다시 렌더링 되거나, Data fetching이 다시 일어나는것은 비효율적이며 이를 방지할 수 있다.

아래는 이를 위해 시도해볼 수 있는 방법이며 3번때의 router.push(url, as, {shallodw: true})가 shallow Routing이 적용된 사례이다.

 

✔️ url 을 바꾸는 3가지 방식

• location.replace('url')
  : 로컬 state가 유지되지 않음(리렌더)
• router.push(url)
  : 로컬 state는 유지 / data fetching이 다시 일어남
• router.push(url,as,{shallow:true})
  : 로컬 state는 유지 / data fetching이 새로 일어나지 않음