shallow routing

nextjs에서 routing이 일어나면 getServerSideProps, getStaticProps, getInitialProps을 갖게됩니다.
그러나 리랜더링 하지 않고 현재 URL을 업데이트 하는 것이 shallow routing입니다.

---

getInitialProps

웹 페이지는 각 페이지마다 사전에 불러와야할 데이터들이 있다. Data Fectching이라고도 하는 로직은 CSR(Client Side Rendering)에서는 react 로직에 따라 componentDidMount or useEffect로 컴포넌트가 마운트 되고 나서 하는 경우가 많다. 이 과정을 서버에서 미리 처리하도록 도와주는 것이 바로 getInitialProps이다.

---

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

어딘가로 이동할때 이렇게 shallow 옵션을 true 로 해주면 새로고침 없이 url만 바뀐다.

그래서 일단 처음에 useState로 상태값을 만든 후에 밑에다가 useEffect로 url 파라미터 ( ex. router.query.place ) 가 바뀔때마다 setState를 해주고 다른 컴포넌트에서는 해당 state값을 prop 으로 받아서 가져다 쓰면 된다.

그리고 다른 컴포넌트에서 setState를 해야할때 부모 컴포넌트에서 setState를 자식 컴포넌트의 prop으로 넘겨주는 방식이 아니라 그냥 어느 컴포넌트든지 router.push + shallow : true 로 url만 바꿔주면 알아서 setState한 것과 동일한 효과로 전부 리랜더링이 되는거다.