Shallow routing(얕은 라우팅)

shallow routing : 얕은 라우팅
https://nextjs.org/docs/routing/shallow-routing
https://github.com/Road-of-CODEr/we-hate-js/blob/master/Front-End/Next.js/routing/shallowRouting.md
https://geonlee.tistory.com/229

shallow routing은 data fetching 메서드(getServerSideProps, getStaticProps, getInitialProps)를 다시 사용하지 않고 URL을 변경하는 방식
state를 잃지 않으면서 pathname, router 객체를 통한 query를 업데이트 할 수있음

pathname 전체 경로
query query가 저장된 객체 (문자형)

shallow 옵션을 true 로 바꿔줘야함!!! shallow: true

data fetching

: Next에서 제공하는 메서드. 사이트를 렌더링 하기 전 어떤 데이터를 이용해서 페이지를 생성할 것인지에 대한 함수를 작성하는 기능!

getServerSideProps

서버 사이드 렌더링을 위한 함수,
컴포넌트에 props를 넘겨준다는 getStaticProps 와의 공통점이 있으나 빌드 시가 아닌 매 request를 할때 마다 실행된다

getStaticProps

데이터 패치 함수, 페이지 생성시 자동으로 실행되며 그 props를 컴포넌트에 전송한다

getStaticPaths

동적 라우팅이 가능하게끔 만들어 주는 data fetching 메서드.
페이지 별로 라우팅을 주지 않아도 []를 이용해 동적 라우팅이 일어나게 해주는 메서드!

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

패칭 메서드를 실행하지 않고 업데이트 된 pathname, query를 받아 url을 바꿔줄 수 있다!!