Client-side data fetching

React Server Component 사용하는데 클라이언트 측에서 데이터 페칭을 해야 하나요?

클라이언트 측에서 데이터를 페칭하는 것이 유용한 경우는 다음과 같아요

사용자 상호작용에 따른 부분적인 UI 업데이트

• 사용자 상호작용에 따라 필요한 데이터만 재요청하고 UI의 일부만 동적으로 갱신해야 하는 경우, 클라이언트 측 페칭이 더 효율적이에요.
• 전체 페이지를 다시 로드하지 않고 특정 컴포넌트를 동적으로 갱신할 수 있어요.
• 예시: 무한스크롤 (사용자가 목록을 아래로 스크롤할 때, 클라이언트 측에서 데이터를 추가로 요청해 기존 목록을 확장해요.)

개인화된 데이터

• 사용자 프로필과 같은 개인화된 데이터는 사용자의 고유한 정보이기 때문에 SEO 인덱싱이 필요하지 않아요.
• 클라이언트 측 데이터 페칭을 통해 서버의 부하를 줄이면서도 필요한 정보를 제공할 수 있어요.
• 예시: 사용자 프로필 설정 페이지

Tanstack Query를 사용하는 이유

useEffect 사용하면 되지 왜 Tanstack Query를 사용하나요?

간편한 비동기 상태 관리

• TanStack Query는 isLoading, isError, isSuccess와 같은 상태 플래그를 통해 데이터 페칭 상태를 간단히 관리할 수 있어요.
• useEffect와 같은 기본 훅을 사용해 직접 상태를 관리하는 것보다 코드가 간결해지고 유지보수가 쉬워요.

캐싱 기능