Connection

Next.js는 기본적으로 뒤로 가기 및 앞으로 가기 탐색 시 스크롤 위치를 자동으로 복원합니다. 그러나 기존에는 클라이언트 컴포넌트 내의 상태(state)에만 아이템을 저장했기 때문에, 검색 아이템 페이지로 이동 후 다시 돌아왔을 때 아이템이 사라져 스크롤 복원이 되지 않는 문제가 발생했습니다. 이를 해결하기 위해 react-query의 useInfiniteQuery를 사용하여 무한 스크롤을 구현하고, 검색 아이템을 react-query에 캐싱 하여 기존 페이지로 복원 시 기존 아이템이 유지되도록 변경했습니다.

강사 & 클래스 상세 페이지 방문 후 preview에서 관심 표시를 하면 Next.js의 fetch cache 기능 때문에 좋아요 표시가 되지 않는 문제가 발생했습니다. 이를 위해 관심 표시한 강사와 클래스의 id를 react-query의 전역 상태로 관리하고, Like 컴포넌트가 이 전역 상태를 구독하여 동기화함으로써 해결했습니다.

Zustand Store에 유저 정보를 저장하고, 해당 유저 정보를 프로필 컴포넌트가 구독하여 조건부 렌더링을 수행합니다. 이로 인해 pre-rendering 단계에서는 로그인 이전 상태로 보이게 되고, hydration이 완료된 후에야 Zustand 유저 Store가 업데이트되면서 Hydration Delay 동안 비로그인 상태처럼 보이게 됩니다.

이 문제를 해결하기 위해, 프로필 컴포넌트가 Zustand 상태에 의존하지 않도록 하고 서버 컴포넌트에서 유저 정보를 props로 전달받아 프로필 컴포넌트도 pre-rendering이 되도록 구현했습니다.

Dynamic Import 기술을 적용하여 필요한 섹션만을 실시간으로 로드하도록 최적화하였습니다. 이 접근 방식은 전체 페이지의 로딩 시간을 단축시키고, 성능을 크게 향상시켰습니다. 사용자는 더 빠르고 원활한 인터페이스를 통해 클래스를 효율적으로 등록할 수 있게 되었습니다.

Next.js의 public 폴더 내에서 환경 변수를 사용할 때 발생하는 이슈로, Firebase의 Service Worker가 Next.js의 public 폴더 내에서 작동하기 때문에 발생하는 문제였습니다. 이 문제를 해결하기 위해 dotenv 패키지를 사용하여 빌드 시점에 process.env의 내용을 가져와 Firebase의 키값을 안전하게 숨길 수 있게 되었습니다. 이 방법을 통해 Firebase 키를 효율적으로 관리하며 보안성을 높일 수 있었습니다.

Next.js에서 동적 메타 데이터를 생성하는 과정에서, generateMetadata 함수와 Page 컴포넌트가 각각 별도로 API 요청을 수행하게 되었습니다. 이로 인해 동일한 API 요청이 두 번 발생하여 서버 리소스의 낭비가 발생했습니다. 이러한 문제를 해결하기 위해 React Cache를 사용하여 fetch 요청의 결과를 캐시하고 동일한 데이터를 재사용하는 방법을 도입했습니다. 이 방법을 통해 단 한 번의 요청으로 데이터를 획득하고, 해당 데이터를 페이지와 generateMetadata 함수에 모두 전달할 수 있게 되었습니다.