nextjs를 이용하여 구현했다.
그리고 nextjs의 서버사이드 렌더링을 사용하면 page에서 많은 데이터를 load하게 되며 관심사의 분리가 잘 안되는 문제가 있다. 이는 context api를 이용하여 해결할 수 있다고 한다.
그러나 리렌더 최적화 문제가 있고 코드가 방대해 질수 있다.
그래서 react-query나 swr을 사용하면 간결하게 해결할 수 있다.
토스팀에서는 react-query를 사용하였는데 ssr시점에는 useQuery의 값이 undefined 이기 때문에 이를 ssr에 맞게 변경해야 한다.
다시 첫번째 코드로 돌아와 props 드릴링 코드로 바뀌게 된다.
이는 구현뿐만 아니라 인터페이스가 변경되는 작업이기 때문에 마이그레이션 비용이 커진다.
