안녕하세요, 강의를 완강하고 프로젝트에 BFF 구조를 적용하면서 API 레이어 설계에 대해 고민이 생겨 질문드립니다.[BFF를 쓰게 된 이유]1. 외부 API 키를 클라이언트에 노출하지 않기 위해2. next/headers의 cookies()로 서버에서만 토큰을 읽고 외부 백엔드 API에 전달하기 위해- httpOnly 쿠키로 토큰을 저장하여 클라이언트에서 읽을 수 없기 때문에 서버에서 처리 해야 했습니다.3. CORS [예시 프로젝트 구조]features/auth/api/... → API 레이어features/auth/hooks/... → Tanstack Query 훅[고민하게 된 흐름]Tanstack Query와 함께 쓰는 경우, 클라이언트에서는 Route Handler(/api*)를 경유해야 하고,Server Component에서나 prefetchQuery 상황에서는 Route Handler를 경유 할 필요 없이 직접 외부 백엔드 API를 호출하는 게 맞다는 생각이 들었습니다.그러다 보니 API 레이어가 둘로 나뉘게 됐습니다.- user.ts → 클라이언트용, Route Handler 호출- user.server.ts → 서버용, 외부 API 직접 호출인가가 필요한 작업인 Route Handler 내부에서는 cookies()로 토큰을 읽고 header에 엑세스 토큰을 첨부해 보내고 있습니다.[질문]API 레이어를 서버/클라이언트로 분리하는 것이 Next.js + Tanstack Query 환경에서 일반적인 접근인지, 혹시 파일을 나누지 않고도 이 구조를 깔끔하게 유지할 수 있는 더 나은 방법이 있다면 조언 부탁드립니다 ㅠ.ㅠBFF 없이도 이 구조를 해결할 수 있는 방법이 있는지도 궁금합니다.유저별로 다르게 보여줘야하는 데이터가 아닌 공통 데이터는 Next의 서버 캐시(revalidateTag)만으로 관리하는게 나을까요? 만약 prefetchQuery로 hydrate하는 구조를 가져간다면, 유저 인터렉션 후 갱신이 필요할 때 Server Actions으로 updateTag를 먼저 실행 후 invalidateQueries로 refetch하는 방식이 올바른 접근인지 여쭤보고 싶습니다이런 구조적인 고민들을 하다 보니 머리속에 혼란이 와서, 단순하고 일관되게 유지할 수 있는 컨벤션은 어떻게 정하는게 좋을지 궁금합니다[참고 자료]https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr