shallow routing

얕은 라우팅 (shallow routing)

Next.js에서 얕은 라우팅(Shallow Routing)은 데이터 가져오기 메서드를 다시 실행하지 않고 웹사이트의 URL을 변경하는 기능이다.

업데이트된 pathname 과 query의 상태를 잃지 않고, 업데이트 된 pathname 을 router 객체를 통해 받는다.

얕은 라우팅(Shallow Routing) 이 적용된 사이트에서는 url 파라미터에 현재 상태가 그대로 반영되기 때문에 내가 보는 페이지 내용 그대로 타인에게 공유가 가능하다.

사용방법

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// url : '/'
export default function Page() {
  const router = useRouter()

  useEffect(() => {
    // 마운트 이후 이동 url : '/?counter=10'
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // the counter changed
  }, [router.query.counter])

}

라우팅시 shallow 옵션을 true 로 해주면 새로고침 없이 마운트 후 페이지 url이 '/' 에서 '/?counter=10' 로 url만 바뀐다. 즉 페이지는 대체되지 않고, 라우트의 상태만 변경될 것이다.

shallow routing 사용시 주의사항

Router.push('/?counter=10', '/about?counter=10', { shallow: true })

shallow routing 은 동일한 페이지의 url 변경에 대해서만 동작한다.

shallow: true 라고 적용해도, 파라미터가 바뀐 것이 아니고, 페이지 자체가 바뀐 것이니 현재 페이지를 업로드하고, 새로운 페이지를 로드 하는 과정에서 shallow routing 을 요청하긴 했지만 데이터가 패치되는 것을 기다릴 것이다.

출처 및 참고
https://nextjs.org/docs/routing/shallow-routing