Shallow Routing

shallow routing은 새로고침하지 않고 url을 불러올 수 있는 next/js의 기능이다.

pathname과 query

• pathname 전체경로
• query query string 이 저장된 객체

💡query string이란
url주소를 통해 사용자들에게 데이터를 넘겨주는 것.
url의 주소 뒤의 ?를 통해 구분할 수 있으며 ? 앞이 url, ? 뒤가 query string이다.

router.push

router.push의 파라미터로 들어갈 수 있는 건 아래와 같다.

router.push(url, as, options)

• url 이동하고자하는 주소
• as 브라우저 url바에 표시될 주소(옵션이므로 사용하지 않아도 무방)
• option
  - shallow 새로고침 없이 url을 바꿔준다.
  - getStaticProps, getServerSideProps, getInitialProps를 갖는다.
  

shallow routing은 shallow:true값을 주면 활성화됨

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

function Page() {
  const router = useRouter()

  useEffect(() => {
    router.push('/?counter=10', undefined, { shallow: true })
  }, [])

  useEffect(() => {
  }, [router.query.counter])
}

export default Page

shallow: true 설정 시 데이터 페칭 메서드인 getStaticProps, getServerSideProps, getInitialProps 를 실행하지 않고 업데이트 된 pathname과 query를 받아 url을 바꿔줄 수 있다.