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 바에 표시될 주소로, 옵션이므로 사용하지 않아도 된다.
• shallow 새로고침 없이 url을 바꿔준다.

이 외에도 다양한 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