sns의 무한 스크롤을 편리하게 구현하기 위해 Tanstack Query의 InfiniteQuery 를 사용하였습니다.
Next.js middleware
인증인가 처리를 효율적으로 하기 위해 페이지 접근 전에 인가 상태를 확인할 수 있는 Next.js middleware를 사용하였습니다.
ReactDom.CreateRoot
서버 컴포넌트와 클라이언트 컴포넌트 모두에서 바로 호출할 수 있는 커스텀 alert 모달을 위해 ReactDom.CreateRoot 를 사용하였습니다.
💥 트러블 슈팅
Hydration 불일치 에러
서버사이드 prefetch 데이터와 클라이언트에서 렌더링 되는 데이터 간의 불일치로 Hydration 불일치 에러가 발생했습니다. 쿼리키 수정과 fetch 함수 통일로 해결하였습니다.
middleware 사용의 어려움
middleware 사용 미숙으로 사용자 리다이렉팅이 원하지 않는 방향으로 실행되었습니다. 특히 middleware에서 예외로 처리할 pathname에 api 경로를 포함시키지 않아서 모든 api route handler에 대해 평가되는 상황이 있었습니다. matcher 에서 정규식으로 예외처리를 통해 해결했습니다.
