데이터 페칭이 되면 React Query를 대체할 수 있을까요?

한 입 크기로 잘라먹는 Next.js(15+)

4.1) 앱 라우터의 데이터 페칭

해결된 질문

작성

강의를 들어보니 React Query와 꽤 비슷한 부분이 많다고 생각되서 혹시 대체할 수 있을까 생각이 들었는데요. 정환님은 어떤 생각을 가지고 계신지 궁금하여 질문 드립니다.

만약 App Router로 새로운 프로젝트를 구축해야 한다고 하면 React Query를 사용하실건가요?

react typescript next.js

답변 2

이정환 Winterlood

지식공유자

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

이전에 비슷한 질문이 있었는데요 해당 질문의 답변이 suwonlee 님께도 좋은 답변이 될 수 있을 것 같아 붙여넣어드립니다!

말씀해주신 대로 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가 유용하다고 생각합니다. 용민님의 프로젝트 성격에 따라 적절한 도구를 선택해 활용하시면 좋을 것 같습니다 !

인프런 AI 인턴

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

Next.js에서의 데이터 페칭과 React Query의 사용 여부에 관한 흥미로운 질문을 주셨네요. React Query와 Next.js의 기능에 대해 좀 더 명확히 이해하는 것이 중요합니다.

Next.js와 React Query 차이점

Next.js의 데이터 페칭 기능: Next.js는 getServerSideProps, getStaticProps 등의 메소드를 통해 서버에서 데이터를 미리 가져오고 페이지를 렌더링합니다. 이는 서버 측에서 초기 데이터를 준비함으로써 클라이언트의 로딩 시간을 줄여주며, SEO에도 유리합니다.
React Query는 클라이언트 측 라이브러리로, 데이터의 서버 요청 및 캐싱, 상태 관리를 주로 담당합니다. 클라이언트에서 비동기 연산을 쉽고 효율적으로 관리할 수 있게 해주는 강력한 도구입니다. 특히, 공유 상태나 캐싱이 필요한 경우 매우 유용합니다.

대체 가능성

React Query는 Next.js의 기본 기능과 다르게 클라이언트와 상호작용하면서 비동기 데이터의 캐싱, 리페칭, 상태 관리를 강화합니다. 따라서, Next.js의 기본 기능만으로는 복잡한 상태 관리나 캐싱 요구를 충족시키기에 부족할 수 있습니다.

상황에 맞게 선택하기

App Router와 같은 새로운 프로젝트를 만들 때 중요한 것은 프로젝트의 요구사항에 맞는 도구를 선택하는 것입니다. 데이터 상태 관리와 캐싱이 핵심인 경우 React Query가 여전히 유용할 수 있으며, Next.js의 서버 측 기능과 조합하여 사용할 수 있습니다.

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