스크롤 복원

일반적으로 웹 브라우저에서 이전에 방문했던 페이지로 돌아가면, 페이지는 떠나기 전까지 스크롤하던 정확한 위치로 이동합니다. 이를 스크롤 복원이라고 하며, 웹 애플리케이션이 클라이언트 측 데이터 페칭으로 전환되면서 다소 퇴보했습니다. 하지만 TanStack Query를 사용하면 더 이상 그렇지 않습니다.

TanStack Query 자체가 스크롤 복원을 구현하지는 않지만, SPA에서 스크롤 복원이 깨지는 가장 큰 원인 중 하나인 재요청으로 인한 UI 초기화를 제거합니다. 이전에 가져온 데이터를 캐시에 유지하고 (선택적으로 placeholderData를 사용하여) 페이지로 돌아갈 때 안정적인 레이아웃으로 즉시 렌더링할 수 있어, 라우터(예: React Router의 ScrollRestoration, TanStack Router의 스크롤 복원, 또는 간단한 커스텀 히스토리 기반 솔루션)가 스크롤 복원을 처리할 때 더 믿을 수 있게 합니다.

별도의 설정 없이도 TanStack Query에서는 모든 쿼리(페이지네이션 및 무한 쿼리를 포함)에서 “스크롤 복원”이 자동으로 작동합니다. 이는 쿼리 결과가 캐시에 저장되어 쿼리가 렌더링될 때 동기적으로 가져올 수 있기 때문입니다. 쿼리가 충분히 오래 캐시되고(기본값 5분) 가비지 컬렉션되지 않는 한, 스크롤 복원은 언제나 즉시 동작합니다.