shallow route 를 이용하여 data fetching없이 url바꾸기

 

next.js 공식문서에 따르면, Shallow routing을 사용하여 url을 데이터 fetching 없이 바꿀 수 있다고 한다.

 

shallow routing을 사용하기 위해, shallow option을 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 })
  }, [])

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

export default Page

위의 코드가 작성된 페이지가 렌더링되자마자 useEffect가 실행되고 url이 변화한다. 보통 router.push에 의해 url이 변화하면 페이지가 이동되지만, shallow : true 때문에 data fetching 없이 url만 변한다.

 

실험해보자.

먼저 공식문서처럼 따라친 useEffect를 주석처리하고 페이지 주소창을 보자.(다른건 볼 필요 없음)

그냥 평범한 url이다.

이번엔 내가 원하는대로 url을 바꿔보자. 페이지 이동없이!

공식문서에 소개된 useEffect와 거의 흡사하게 작성하였다.

맨 마지막 url에 model=bmw가 붙도록 해보자.

페이지 이동시 model=bmw 가 url에 붙는다.

 

입사하기전에는 몰랐는데, 마케팅측면에서 혹은 보안측면에서도 url이 중요한 역할을 함을 알게 되었다.(정확히는 모르지만 url관련 이슈들을 몇번 봤음)

 

그래서 이 내용이 도움이 될 진 모르지만 우선 공부했다.

---

참고문서 

https://kyounghwan01.github.io/blog/React/next/getInitialProps/#context-object

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