Shallow Routing

 

 Shallow routing은 Next.js의 기능 중 하나로 데이터를 다시 가져오지 않으면서(fetching 메서드를 다시 실행하지 않음) URL을 변경할 수 있는 기능이다. 

이를 통해 URL을 업데이트하면  'pathname'과 'query' 상태를 잃지 않고 라우터 객체를 통해 받을 수 있게 된다.

 

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

// Current URL is '/'
function Page() {
  const router = useRouter()

  useEffect(() => {
    // Always do navigations after the first render
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

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

export default Page

 

최초 렌더링 후 라우터는 /?counter=10으로 업데이트 되는데, 이 때 페이지가 새로 렌더링 되지 않고 상태 라우터만 변경 된다.

 

 

Shallow Routing은 현재 페이지에서 URL을 변경하는 경우에만 작동한다. 

 

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

 

다른 페이지의 경우 { shallow : ture } 를 해도 새 페이지(pages/about.js)를 로드한다.