Next.js의 App Router 기반 프로젝트에서 탭 UI를 구성하고, 각 탭에 컴포넌트를 연결하는 작업까지는 무리 없이 진행되었다.버튼을 클릭하면 탭이 바뀌고, 화면도 전환되는 인터랙션은 제대로 작동했다.하지만 치명적인 문제가 있었다.🧨 화면은 떴지만, 정작 중요한 데이터는 비어 있었다탭을 눌러도 아무런 정보가 표시되지 않았다.버튼은 잘 보였고, 레이아웃도 정상이라 “정상 동작”처럼 보였지만, 실제로는 데이터가 끝내 표시되지 않았다.원인은 클라이언트 사이드에서 데이터를 요청하는 구조 때문이었다.useQuery를 사용해 데이터를 가져오도록 했지만, 이 방식은 브라우저가 로드된 뒤 실행된다.그래서 브라우저에서 API 요청이 이루어지고, 거기서 데이터를 받아야만 실제 콘텐츠가 보여지는 구조였던 것이다...
