Shallow Routing

shallow routing

getInitialProps, getServerSideProps, getStaticProps를 포함해 data fetching 없이 url을 변경할 수 있는 route 옵션

당연히 페이지가 변경되면 data fetching이 발생되어 이 경우는 shallow옵션이 큰 의미있지 않고, 동일한 페이지에서 url을 변경해 query로 데이터를 케이스에서 유용할 것 같다.

const RouteTest = ({title}) => {
  return (
    <>
    	<p>{title}</p>
            <button onClick={()=>router.replace('/?referrer=reload')}>reload</button>
    	<button onClick={()=>router.replace('/?referrer=shallow', undefined, {shallow:true})}>shallow</button>

    </>
  )
}

export default RouteTest

export async function getServerSideProps(context) {
  console.log('getServerside')
  const title = context.query.referrer || 'default'
  return {
    props: {
    	title
    }, 
  }
}

첫 기본 상태

serverSideProps로부터 받은 props는 기본값 'default'를 나타낸다.
router query의 referrer는 없기 때문에 빈값.

reload가 실행되었을 때

• url변경(ㅇ)
  : '/' => '/?referrer=reload'
• dataFetching(ㅇ)
  : serverSideProps - default > reload로 변경됨
• 렌더링(ㅇ)
  : serverSideProps로 받은 title props와
  router url의 referrer값 모두 변경된 모습을 확인할 수 있다.
  페이지가 새로고침된 것과 마찬가지로 스크롤도 초기화되었다.

shallow가 실행되었을 때

• url변경(ㅇ)
  : '/' => '/?referrer=shallow'
• dataFetching(x)
  : 아예 serverSideProps에 들어오지 않음 'ㅅ'ㅎ
  serverSideProps값이 default로 유지되고있다.
• 렌더링(ㅇ)
  : 변경된 query 'shallow'로 새로 렌더링 되었다.
  다만 shallow 옵션을 사용하지 않았을때와 달리, scroll위치값이 고정되었고
  차이가 있던 부분만 새로 렌더링 되었다.

정리해보았을때 url변경되는 것이 공통점이었고
차이로는 공식문서 설명과 같이 dataFetching이 일어나지 않는다는 것
둘다 렌더링은 새로 일어나지만 차이가 shallow는 차이가 있는 부분만 비교하여 렌더링한다.
아예 새로고침과 같이 발생되지 않는다는 걸 알수있었다.

이 shallow routin을 사용자가 페이지를 이용하면서 화면의 깜빡임이나 스크롤 변경과 같은 불편함이 없도록하면서
url변경에 유리하게 사용하면 좋을 것 같다.