Next13의 data fetching이 react-query를 대체할 수 있을까?
Next13의 서버 컴포넌트를 활용한 data fetching 방법에 대해 공부하다보면 상당부분이 react-query와 흡사하다는 것을 느낄 수 있다.
Next13의 data-fetching 그리고 react-query
Next 13 버전에서는 fetch() api를 지원하여 서버 컴포넌트 내부에서 data fetching이 좀 더 간편하도록 도와준다. fetch 옵션을 통해 캐싱 , revalidate 등의 기능도 쉽게 사용할 수 있다.
여기서 한가지 궁금증이 생겼다.
그렇다면 next13에서 react-query 사용할 필요가 없을까??
보통 react-query를 사용하는 이유의 대부분이 next13의 fetch api가 지원하고있는 기능을 사용하기 위해서라고 생각한다.
캐싱, 동기화 및 업데이트, 서버 상태 불러오기 등..
꽤 비슷하다고 느껴지지 않는가..? 그렇다면..
대체 가능한가?
답은 No (아직은) 대체 불가능하다.
모든 data fetching이 서버 컴포넌트에서 일어날 수 없기 때문이다. 클라이언트 상태를 기반으로 하는 경우가 필요할 때가 있다.
가장 대표적인 예시가 무한 스크롤 기능을 구현할 때다.
무한 스크롤을 구현하기 위해서는 page 값을 두고 값이 늘어날 때마다 api를 매번 호출해야 한다.
하지만 서버 컴포넌트에서는 변화하는 page값을 참조할 수 없기 때문에 클라이언트단에서 api를 호출하여 data fetching을 진행할 수밖에 없다.
클라이언트단에서 리액트 쿼리를 활용하는법
클라이언트단에서 그냥 fetch를 하게 된다면 첫 호출 시 응답이 비교적 느리게 보여 사용자 경험을 떨어트릴 수 있다.
그래서 필요한 것이 리액트 쿼리이다.
( 공식문서에서도 리액트 쿼리의 사용을 적극권장하고 있음! )
리액트 쿼리를 사용해 데이터를 prefetch하여 첫 데이터에 대하여 이미 그려진 html 처럼 보여지게 할 수 있다. -> 사용자 경험 향상!
prefetch를 위한 방법은 두 가지이다.
1. initial Data:
서버 컴포넌트에서 데이터 prefetch 및 클라이언트 컴포넌트로 initialData prop 를 전달하는 방법
2. <Hydrate>
: 서버에서 쿼리를 prefetch 하고 캐시를 dehydrate 한 후, <Hydrate> 로 클라이언트에게 rehydrate 해주는 방법
Hydrate의 설정이 조금 더 복잡하기는 하나 더 권장되는 편이라고 한다.
일단 아직은 시기상조 하지만 언젠가는..?
Next의 업데이트는 빠르게 이루어지는 것 같다.
13이전 버전에서는 data fetching 자체도 getStaticProps, getStaticPaths를 별도로 생성하여 호출해야지 사용할 수 있었는데 13버전부터는 fetch api로 간편하게 사용 가능하다.
이것만 봐도 업데이트 과정에서 개발자의 경험을 꽤 중요하게 생각하지 않았나 싶다.
그렇다면 지금은 아니지만 추후에는 리액트 쿼리를 사용하지 않고도 리액트 쿼리의 효과를 100% 낼 수 있는 업데이트 사항이 생길 수 있지 않을까....?!?!
빨리 그날이 왔으면.. 편하겠다ㅎㅎ
참고
https://nextjs.org/docs/pages/building-your-application/data-fetching/client-side