shallow Routing

Shallow Rrouting

얕은 라우팅을 사용하aus, 데이터 가져오기 매소드를 다시 실행하지 않고도 URL을 변경할 수 있다.
얕은 라우팅을 활성화 하려면 useRouter를 사용하면서 shallow 옵션을 true로 하면,새로고침 없이 url만 바뀐다.
뒤로가기를 눌렀을때, 바로 이전 동작으로 되돌릴 수 있다.
페이지는 교체되지 않고, 경로의 상태만 변경된다.
얕은 라우팅 은 현재 페이지의 URL 변경 에만 작동한다.

router.push(format({
      pathname,
      query: {
        ...query, place: query?.place ?? (place || '부산'), active2: 'true', active3: 'true',
      },
    }),
    undefined, { shallow: true });

프로젝트를 하다보면 상태에 대한 부분들이 전부 URL 값 파라미터에 반영되어야하는 경우가 있다. 이유는 모든 사용자의 동작들이 URL로 반영되어야 내가 보고있는 페이지 그대로 누군가에게 URL을 공유할때 받는 사람도 같은 화면을 볼 수 있게 되기 때문이다. 또한 뒤로가기를 눌렀을때 바로 이전 동작으로 되롤릴 수 있으며, 웹에서 앱으로 넘어갔을때 앱에서도 똑같은 페이지를 볼수 있게 해야한다. 이러한 동작을 도와주는것이 Next.js에서 제공하는 Shallow Routing이다. Shallow Routing 을 사용해 URL 업데이트하면 값의 상태를 잃지 않고 Router 객체를 통해 받을수 있게 된다. 즉, 불필요한 서버 연산을 최소화하고 필요한 상태 값을 전달하게 되는것이다.