로딩 속도 개선을 위한 고민 (tanstack Query를 곁들인)

로딩이 늦는 문제

현재 상황

우측 비디오를 통해 확인할 수 있지만, 로딩 속도가 굉장히 느리다고 느껴졌다.

• get channel를 기준으로 701ms

• get posts의 경우 641ms

 

개선 방향

data fetching 속도가 느리다는 것이 확연하게 보였고, 팀 내에서 data fetching속도를 줄이기 위한 고민을 하게 되었다.

만일 data fetching 속도를 줄일 수 없다면 사용자에게 빠르다는 인상을 주는 방식이 중요하다고 느꼈다. 우리 프로젝트의 성격을 고려했을 때, 애니메이션이 많기때문에 눈속임에 유리할 것이라는 생각이 들었다. UX를 개선하기 위해서 사용자에게 노출되는 시간을 속이기 위한 목적으로 낙관적 업데이트를 고려하고 있었다.

 

 

data fetching을 더욱 빠르게

• 보안 문제가 해결되어 vercel을 제거해 호출을 줄이는 방식이 가능해졌고, 요청을 직접 발송하는 방식으로 변경을 진행하였다.

• get channel + get posts를 기준으로 각각 17ms, 74ms에 해당, 약 600ms 단축

• 하지만,, 마침 내가 작업하는 API를 사용하는 페이지에서는(채널리스트, 채널, 알람 등) 항상 현재 상태가 fresh상태임을 보장할 수 없기때문에 적용할 수 없었다. 따라서 유경님의 코드를 통해 예시 코드를 가져왔습니다!

//useUserFollowList.ts
function useUserFollowList(followList: Follow[], queryKey: string) {
  return useSuspenseQueries({
   queries : {
			...
			staleTime: Infinity
			...
		}
...
export default useUserFollowList;