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

이상연님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

react-query를 쓰는 이유와 fresh, stale, inactive

ReactQuery와 Next를 공부하다가 궁금한 점이 생겼습니다.

해결된 질문

24.07.22 00:59 작성

·

264

0

React Query가 사실 데이터를 불러오고 캐싱하는 이유가 가장 큰 것으로 알고있습니다.

하지만, Next14부터는 fatch에 store 기능이 생기면서 캐싱이 되는걸로 알고 있는데, 그러면 데이터 캐싱만을 사용하며 굳이 React Query를 사용하지 않아도 되는건가요?

답변 3

1

인프런 AI 인턴님의 프로필 이미지

2024. 07. 22. 01:01

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

질문자님께서는 React Query와 Next.js의 캐싱 기능에 대해 궁금해하시는군요. 말씀하신 내용에 따르면, React Query의 데이터 캐싱 기능과 Next.js(version 14부터)의 fatch(store 기능)을 통한 캐싱 기능 사이의 차이점이 주요 관심사인 것 같습니다.

Next.js의 fetch와 React Query에서의 캐싱 개념에 대한 질문이 이미 이전에 나왔었습니다. 질문자는 Next.js의 fetch도 캐싱이 지원되며, React Query 역시 캐싱이 지원된다는 것을 이해했다고 언급했습니다. 이에 대해 Nextjs fetch, react-query 캐시 개념에서 답변이 제시되었습니다.

답변에 따르면:
1. Next.js의 캐시는 주로 서버 사이드에서의 캐싱을 말하며, React Query는 클라이언트 사이드에서의 캐싱에 중점을 둡니다.
2. React Query는 클라이언트 사이드에서 데이터를 관리하는 경우가 많기 때문에 선호되기도 합니다. 또한, React Query는 다양한 데이터 동기화 기능과 함께, 서버 상태 관리를 용이하게 해줍니다.

즉, Next.js의 fetch(store 기능 포함)과 React Query 모두 캐싱을 지원하지만, 적용되는 영역과 제공하는 기능에 차이가 있음을 알 수 있습니다. React Query를 사용하는 주된 이유는 클라이언트 사이드에서의 강력한 데이터 동기화와 관리 기능 때문일 수 있으며, Next.js의 캐싱은 서버 단에서의 최적화와 관련이 깊습니다.

이런 차이점을 고려할 때, 만약 질문자님의 프로젝트가 클라이언트 사이드에서 복잡한 데이터 상태 관리나 동기화가 필요하다면 React Query의 사용이 여전히 유리할 수 있습니다, 반면, 단순히 데이터의 서버 사이드 캐싱만을 목적으로 한다면 Next.js의 새로운 기능을 활용하는 것도 좋은 선택일 수 있습니다.

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

0

이상연님의 프로필 이미지
이상연
질문자

2024. 07. 24. 21:15

감사합니다

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 07. 22. 02:03

ai 인턴 답변 참고하세요~