인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

수준급의 질문 감사합니다 순서대로 답변드릴게요!

1번 질문

우선, 말씀해주신 대로 Tanstack Query와 Next.js의 Fetch 메서드는 공통적으로 비슷한 기능을 제공하며, 특히 캐싱 부분에서 그렇습니다. 실제로 Tanstack Query의 개발자 TkDodo는 이에 대해 다음과 같은 글을 남겼습니다:

https://tkdodo.eu/blog/you-might-not-need-react-query

이 글에 따르면 Next.js에서는 React Query가 반드시 필요하지 않을 수 있다고 합니다. 말씀하신 것처럼 일반적인 활용 사례에서는 대부분의 기능을 Next.js의 Fetch 메서드를 통해 처리할 수 있기 때문입니다.

그러나 저는 개인적으로 두 도구 모두 여전히 충분한 활용 가치가 있다고 생각합니다. Next.js의 Fetch 메서드는 서버 측에 캐시가 집중되는 반면(예: 데이터 캐싱), Tanstack Query는 클라이언트 측에 캐시가 집중됩니다. 따라서 무한 스크롤, 데이터 리페칭, 페이징 등의 클라이언트 중심의 캐싱 기능이 필요한 경우에는 여전히 Tanstack Query가 유용하다고 생각합니다. 용민님의 프로젝트 성격에 따라 적절한 도구를 선택해 활용하시면 좋을 것 같습니다.

2번 질문

아쉽지만 기본적으로는 제공되지 않습니다 ㅠㅠ 그러나 Next.js에서는 보통 미들웨어를 통해 헤더에 담긴 인증정보를 처리하기 때문에 충분히 커버할 수 있는 부분이라고 생각합니다. 쿠키와 헤더 그리고 미들웨어만 잘 활용하면 되니까요 😃

PS. BASE_URL의 경우에는 베이스 역할을 하는 함수 하나를 만들어 파라미터로 경로를 조절해가며 사용하면 충분히 대체 가능할 것 같습니다.

3번 질문

1번 질문의 답변으로 충분히 답변이 되셨을 거라 생각합니다. 결론적으로 다시 정리하자면 Next.js fetch 메서드는 서버측 캐싱에 집중되어 있고 Tankstack Query는 클라이언트측 캐싱에 집중되어 있습니다. 그러므로 진행하시는 프로젝트에 무한스크롤, 데이터 리페칭, 페이징 등의 클라이언트 측 캐싱 기능이 많이 필요하다면 Tanstack Query를 도입하시는걸 추천드립니다. 그러나 그렇지 않은 상황이라면 Next.js Fetch 만으로 충분하기에 굳이 도입하실 필요는 없을 것 같습니다.

안녕하세요, 인프런 AI 인턴입니다.

김용민 님의 질문에 대해 답변 드리겠습니다.

관련 질문들:

1. Nextjs에서 데이터를 fetching 하는 방법

   • 이 질문에서는 Next.js에서 데이터를 fetch하는 다양한 방식을 다루고 있으며, React Query와의 차별점을 이해하는데 도움이 될 것입니다.
     

2. React Query vs SWR 비교

   • 이 질문에서는 React Query와 SWR(Sent With React)의 사용 사례 및 차이점을 비교합니다. Next.js에서의 활용 여부와 상황에 따라 더 적합한 방법을 선택하는 방안을 제시합니다.
     

추가 설명:

1. Tanstack Query 와 Next.js 의 캐싱 기능 겹침 문제:
Next.js는 기본적으로 getServerSideProps, getStaticProps, useSWR와 같은 기능을 통해 데이터 fetching을 지원합니다. 반면, Tanstack Query(Tanstack Query)나 React Query는 클라이언트 요청시 강력한 캐싱, 자동 리페칭, 오류 처리 등의 고급 기능을 제공합니다. 무한 스크롤(Infinite Scroll) 기능이 중요한 경우, Tanstack Query 사용이 유리할 수 있습니다. 현업에서는 Next.js와 Tanstack Query를 병행해서 사용하는 경우가 있는데, 이는 프로젝트의 복잡도와 요구사항에 따라 다릅니다.

2. Next.js Fetch와 Axios 비교:
Axios를 통해 제공되는 axios.create로 헤더 설정, baseUrl 정의, 인터셉터(Interceptor) 사용 등은 아주 유용합니다. Next.js의 내장 fetch API는 기본적으로 이러한 기능들을 지원하지 않지만, fetch를 래핑하여 이러한 기능들을 구현할 수 있습니다. 커스터마이징이나 확장이 필요한 경우, Next.js 프로젝트에서도 Axios나 기타 유사한 라이브러리를 사용하는 것이 일반적입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.