Next.js + Tanstack Query BFF 구조 질문
10
投稿した質問数 4
안녕하세요, 강의를 완강하고 프로젝트에 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
回答 1
0
안녕하세요, 인프런 AI 인턴입니다. 김수로님. Next.js와 Tanstack Query를 사용하는 프로젝트의 BFF(Backend for Frontend) 구조 관련 문제에 대한 질문을 주셨네요. 관련하여 답변 드리겠습니다.
1. API 레이어의 서버/클라이언트 분리
Next.js와 Tanstack Query 환경에서는 API 레이어를 서버와 클라이언트로 분리하여 설정하는 것이 일반적인 접근 방식입니다. 이는 보안을 강화하고 클라이언트로의 불필요한 데이터 노출을 방지하기 위해 중요한 방법입니다. 특히, 서버 측에서만 접근 가능한 정보를 처리하는 경우 분리가 필요합니다. 현재의 접근 방법은 바람직하며, 필요에 따라 파일을 나누어 유지하는 것이 좋은 방법입니다.
2. BFF 없이 구조 해결
BFF 없이 구조를 해결하려면, 기본적으로 서버 측에서 필요한 모든 논리를 람다 함수 혹은 서버 기능을 활용하여 처리한 후, 클라이언트 컴포넌트에 필요한 최소한의 데이터만 전달하는 방식으로 접근할 수 있습니다. 그러나 보안이나 CORS 문제를 완전히 해결하기는 어려울 수 있습니다. BFF는 일반적으로 이러한 문제를 깔끔하게 해결하기 위해 많이 사용되므로, BFF를 유지하는 것이 바람직한 경우가 많습니다.
3. 공통 데이터 관리와 캐싱
유저별로 다르게 보여줄 필요가 없는 공통 데이터의 경우, Next.js의 서버 캐시(예. revalidateTag)를 활용하여 관리하는 것이 효율적입니다. 서버 캐시를 통해 중복 요청을 방지하고, 성능을 향상시킬 수 있습니다. 한편, prefetchQuery를 사용하여 데이터를 미리 로드한 뒤, 유저 인터랙션으로 데이터가 변경될 경우 invalidateQueries를 통해 데이터를 갱신하는 방식은 타당한 접근 방식입니다. 이는 데이터 정합성을 유지하고 최적의 상태를 제공합니다.
4. 컨벤션 설정
구조적 일관성을 유지하려면 프로젝트 전반에 걸쳐 명확한 컨벤션을 설정하는 것이 중요합니다. 코드 리뷰를 통해 다른 팀원들과 합의된 컨벤션을 문서화하고, ESLint와 같은 도구를 활용하여 코드 일관성을 강제할 수 있습니다. 또한, 코드베이스 내에서 역할과 목적이 잘 나누어진 폴더 구조를 구축하여 혼란을 방지하는 것이 좋습니다.
참고 자료
- Next.js와 BFF 기본 원칙: BFF와 관련된 질문 및 답변.
- Tanstack Query와 데이터 관리 전략: Tanstack Query를 활용한 데이터 관리 전략.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
Next.js 사전렌더링 이해하기 부분
0
27
2
모달 관련 질문
0
34
3
렌더링 관련 질문
0
78
2
중복으로 하나의 api를 요청할 때 캐싱 옵션 통일화
0
62
2
라우트 세그먼트 옵션 강좌 노트에 사소한 제보 남깁니다.
0
60
2
SSR시 context에 params말고 query를 사용하면 안되나요?
0
73
2
npx prisma db push 시 에러가 뜹니다.
0
92
3
vercel 배포를 실패하였습니다.
0
97
3
Image 컴포넌트 사용시 브라우저 콘솔에 경고는 왜 뜨는걸까요?
0
55
2
getServerSideProps 함수와 SSR의 관계
0
76
6
없는 페이지인데 풀라우트캐시로 저장이 되는 이유가 궁금합니다
0
58
2
실제 프로젝트에서 SSR 사용에 관해서 질문드립니다.
0
112
2
일반적인 nextjs project architecture에 대하여..
0
85
2
2.14 Search에서 작성한건 static이긴하지만 CSR이 아닌가요?
0
71
2
배포 시 오류 발생
0
87
2
백엔드 서버 오류납니다.
0
81
2
취약점 제거시 nestjs 버전 문제가 생길까요?
0
89
1
eslint.config.mjs 내 rules 어떻게 설정 하나요?
0
103
1
[book]/[id]/page.tsx 모달 띄울 때 성능 하락 현상은 ReviewList를 불러오면서 발생하는 문제 같습니다.
0
60
2
빨간줄 설정
0
75
2
익스텐션 질문
0
58
1
강의 들으면서 궁금한 부분 질문드립니다.
0
109
1
서버 배포 에러입니다.
1
98
2
[5.2) 풀라우트 캐시 2] fetch의 cache 옵션 기본값 질문: no-store/force-cache
1
102
2