Shallow routing

Shallow routing

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

shallow routing 을 알아보기 위해 필요한 router에 대한 정보 몇 가지만 살펴보고 가자.

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 를 갖는다.

이 외에도 다양한 router 객체와 router.push 메서드들이 있으니 공식 문서를 확인해두면 좋을 것 같다.

shallow routing 은 shallow: true 값을 주면 활성화 된다.

shallow routing

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

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