고민해보기

최신의 데이터를 보여줘야 하는 애플리케이션에서의 데이터 캐싱

Hyunsoo_Kim 2024. 10. 3. 16:32

개발환경



1. Next.js

2. tanstack-query

 

주제



tanstack-query는 데이터 캐싱을 위한 기능을 제공하며, 이를 통해 같은 요청을 다시 보내지 않아도 캐싱되어 있는 데이터를 사용할 수 있다. 하지만 유저들이 사용할 수 있는 게시판 등, 서버에 추가되는 데이터를 즉각적으로 보여주어야 하는 상황에서 캐싱된 데이터를 사용한다면 서버에 업데이트 된 데이터를 확인할 수 없다. 그렇다면 각 마운트마다 서버에 데이터를 요청해야 하는데, 데이터를 캐싱해야하는 이유가 있는가

 

처음 글을 작성할 시의 생각



각 유저의 개인정보를 확인하는 마이페이지처럼 요청과 수신 비율이 1 : 1 인 페이지일 경우, 개인정보 수정과 같이 서버에 요청을 보내지 않으면, 캐싱된 데이터를 사용하고, 서버에 수정요청을 보내면 캐싱된 쿼리키를 무효화하여 새로운 데이터를 캐싱하면 되므로 효율적이다. tanstack-query로 캐싱한 데이터는 언마운트 되더라도 staleTime과 gcTime에 설정한 값에 따라 서버에 다시 데이터를 요청하거나 캐싱된 데이터가 가비지데이터로 바뀌는 시간을 조정할 수 있으므로 유지되기 때문이다. 하지만 마운트마다 최신의 데이터를 보여주려면 tanstack-query없이 next.js의 getServerSideProps로 첫 마운트시만 데이터를 요청하는 것이 효율적이라고 생각한다..(현재로써는)