shallow routing

shallow routing

shallow routing은 NEXT.js에서 제공되는 라우팅의 한 방법이다.

getInitialProps를 이용하여 데이터를 가져오지 않고 url을 변경 하는 방법으로
불필요한 서버 연산을 최소화 할 수 있고, 필요한 상태 값을 아래 코드처럼 router객체에 넣어서 전달한다.

router.push(
  {
    pathname: "/friutes?color=red",
    query: { ...values, page: 1 }
  },
  undefined,
  { shallow: true }
);
 \

url이 변경되는 부분은 DidUpdate/useEffect를 통해 감지 할 수 있으며, shallow routing은 동일한 페이지의 url 변경시에만 작동한다. 다른 페이지로 이동시에는 새 페이지가 랜더 되며getInitialProps가 실행된다.

router.push(
  {
    pathname: "/users",
    query: { ...values, page: 1 }
  },
  undefined,
  { shallow: true }
);

위 코드처럼 기존의 "/friutes?color=red", 즉 "/friutes 페이지 에서 "/users"로 새로운 페이지가 랜더 되는거기 때문에 shallow routing 의미가 사라진다.

즉 shallow routing은 페이지를 변경 할 때는 의미가 없어진다.