shallow routing

양세희·2022년 5월 31일
0
post-thumbnail

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

0개의 댓글