NextJS: Shallow Routing

얇은 라우팅(Shallow Routing)

예시: Shallow Routing

얇은 라우팅(Shallow routing)은 getServerSideProps, getStaticProps, getInitialProps를 포함한 데이터 가져오기(fetching) 방법을 실행하지 않고 URL을 변경할 수 있도록 합니다.

useRouter 또는 withRouter에 의해 추가된 라우터 객체를 통해 업데이트된 경로명(pathname)과 쿼리(query)를 상태(state)를 잃지 않고 받을 수 있습니다.

얇은 라우팅을 활성화하기 위해 shallow 옵션을 true로 설정하세요. 다음 예제를 살펴보세요:

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

// 현재 URL은 '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // 첫 번째 렌더링 후에 항상 이동
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
    // 카운터가 변경됐어요!
  }, [router.query.counter])
}

export default Page

URL은 /?counter=10으로 업데이트되며 페이지는 교체되지 않습니다. 라우트(route)의 상태만 변경됩니다.

다음과 같이 componentDidUpdate를 통해 URL 변경을 확인할 수도 있습니다:

componentDidUpdate(prevProps) {
  const { pathname, query } = this.props.router
  // 무한 루프를 방지하고 속성이 변경됐는지 확인합니다
  if (query.counter !== prevProps.router.query.counter) {
    // 새로운 쿼리를 기반으로 데이터를 가져옵니다.
  }
}

주의사항

얇은 라우팅은 현재 페이지에서 URL 변경에 대해서만 작동합니다. 예를 들어, pages/about.js라는 다른 페이지가 있다고 가정하고 다음을 실행한다면:

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

이것은 새로운 페이지이므로 현재 페이지를 언로드하고 새 페이지를 로드하며, 우리가 얇은 라우팅을 수행하도록 요청했음에도 데이터 가져오기를 기다릴 것입니다.

라우팅 미들웨어(middleware)와 함께 사용하는 경우, 이전에 미들웨어가 없었던 상황에서와 같이 새 페이지가 현재 페이지와 일치하는지 보장하지 않습니다.

이것은 미들웨어가 동적으로 다시 작성될 수 있기 때문에, 얕은 라우트 변경이 항상 얕은 것으로 처리되어야 하기 때문입니다.