shallow routing

shallow routing

• shallow routing 은 새로고침을 하지 않고도 url을 불러올 수 있는 next.js의 기능이다.
• state를 잃지 않으면서 pathname과 router 객체를 통한 query를 업데이트 할 수 있다.

ex)

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

• URL이 /?counter=10 로 업데이트된다. 페이지는 교체되지 않고 경로의 상태만 변경됩니다.