- React Query는 주로 클라이언트 사이드 라이브러리이며 서버 컴포넌트와 함께 사용할 때는 데이터 프리페칭에 집중해야 합니다. ✈️
- Next.js 서버 컴포넌트에서 React Query의
prefetchQuery를 사용하여 클라이언트 컴포넌트 로딩 시간을 단축할 수 있습니다. 💨 - 서버 컴포넌트에서는 매 요청마다 새로운 Query Client 인스턴스를 생성하여 데이터 중복을 방지하고 효율성을 높여야 합니다. ♻️
- 서버 컴포넌트에서
fetchQuery를 사용하여 데이터를 직접 가져오는 것은 데이터 불일치 문제를 야기할 수 있으므로 권장하지 않습니다. ⚠️ Suspense경계로 인해 Query Client 인스턴스가 손실될 수 있으므로, Next.js에서는 React 렌더링 사이클 외부에 Query Client를 저장해야 합니다. 💾
Recommanded Videos
