스크롤 복원

전통적으로 웹 브라우저에서 이전에 방문한 페이지로 이동하면, 해당 페이지를 떠나기 전의 정확한 위치로 페이지가 스크롤되어 있는 것을 볼 수 있었습니다. 이를 스크롤 복원이라고 하며, 웹 애플리케이션이 클라이언트 측 데이터 가져오기 방식으로 전환하기 시작한 이후 다소 퇴보했습니다. 하지만 TanStack Query를 사용하면 더 이상 그렇지 않습니다.

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

TanStack Query에서는 페이지네이션 및 무한 쿼리를 포함한 모든 쿼리의 "스크롤 복원"이 별도 설정 없이 그냥 작동합니다™️. 이는 쿼리 결과가 캐시되며 쿼리가 렌더링될 때 동기적으로 검색될 수 있기 때문입니다. 쿼리가 충분히 오래 캐시되고(기본 시간은 5분) 가비지 컬렉션되지 않았다면 스크롤 복원은 항상 별도 설정 없이 작동합니다.