shallow routing

진성·2022년 4월 9일
0

라우팅

목록 보기
2/3

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을 요청했는데도 데이터를 가져오기 기다린다.

reference

next.js - https://nextjs.org/docs/routing/shallow-routing

profile
풀스택 진행중...

0개의 댓글