shallow routing을 사용하면 데이터를 가져오는 메소드를 다시 사용하지 않고도 URL을 변경할 수 있다.
상태를 잃지 않고 라우터 개체를 통해 업데이트 된 경로 이름과 쿼리를 수신한다.
shallow routing을 사용하려면 shallow routing의 상태를 true로 설정하여야 한다.
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 });
// OR
// router.push(
// {
// pathname: "/users",
// query: { ...values, page: 1 }
// },
// undefined,
// { shallow: true }
// );
}, [])
useEffect(() => {
// The counter changed!
}, [router.query.counter])
}
export default Page
사용하는 방법은 위와 같다.
최초 렌더링 이후 라우터는 /?counter=10
으로 업데이트 될 것이다.
이때 페이지는 새로 렌더링 되지 않으며 상태 라우터만 변경된다.
주의해야 할 점으로 shallow routing은 현재 페이지의 URL 변경에만 적용이 된다.
예를 들어 pages/about.js라는 다른 페이지가 있고 다음을 실행한다고 가정을 해보면
router.push('/?counter=10', '/about?counter=10', { shallow: true })
새 페이지에서는 현재 페이지를 언로드하고 새 페이지를 로드한 후 shallow routing을 요청했는데도 데이터를 가져오기 기다린다.