Next.js 의 서버 컴포넌트에서 Prefetch Query 및 PrefetchInfiniteQuery를 적극적으로 활용하여 클라이언트 컴포넌트에서는 초기 데이터를 가지고 실행할 수 있게 하였습니다.

상세 페이지에서는 getQueryData 메서드를 활용하여 완전한 서버사이드렌더링을 구현하고 클라이언트 컴포넌트에서는 fetch가 없도록 하였습니다.

intersection-observer API를 활용한 React-Intersection-Observer 라이브러리를 사용하여, 무한 스크롤시 observing 을 편리하게 구현하였습니다.

Tanstack Query를 서버사이드에서 처음 사용해 보았고, Hydrate, Dehydrate에 대한 이해가 부족하여 어려움을 겪었습니다. 결과적으로 Hydration과 서버사이드 동작 원리를 습득하였고 prefetchQuery, ensureQueryData, getQueryData 등을 원하는대로 사용할 수 있게 되었습니다.

Response Data의 객체 구조가 너무 복잡하여 Typing에 어려움을 겪었습니다. 객체에서 필요한 프로퍼티만 추출하고자 하였으나 사용되는 프로퍼티들이 복잡하게 중첩되어 있었습니다. 타입스크립트의 유틸리티 타입등 사용법을 더욱 익히면서 해결되었습니다.