진행하고 있는 프로젝트의 상세페이지는 SSR로 구현 되어있다.
프로젝트 MVP 주간에는 페이지가 렌더링 되면 클라이언트 사이드에서 데이터를 요청하는 방식이였으나
SSR의 장점을 활용하지 못한다고 판단하였고 react query의 prefetching 을 활용하는 방향으로 성능 개선을 진행하였다.
성능개선 이전 구글 개발자도구의 LightHouse 로 측정결과 TTI 는 4초가 걸렸다
우리 서비스를 이용하는 사용자는 대부분 상세페이지를 클릭할 것이다.
이럴 경우 사용자가 상세페이지에 필요한 데이터를 기다릴 필요가 없도록 미리 데이터를 가져오면 보다 좋은 사용자 경험을 제공할 것이다.
이때 사용 할 수 있는것이 react query의 prefetching 이다.
상세페이지에 들어가는 모집공고문의 데이터는 비교적 안정적이기 때문에 prefetching 에 특히 적합하다고 판단한다.
모집공고문의 데이터는 실시간으로 변동하는 주식시세와 같은 동적인 데이터를 가져오는 것이 아니기 때문에 캐시 된 데이터에 의존하더라도 문제가 되지 않을 가능성이 매우 높다고 생각했다.
유입되는 사용자의 대부분은 메인페이지에서 페이지가 로드 될 것이다.
그렇기 때문에 상세페이지에 필요한 데이터가 캐시에 미리 로드 되고,
로드된 데이터의 캐시 시간이 다 되기전에 사용자가 상세페이지로 이동하는 한 사용자는 서버호출을 할때까지 기다릴 필요가 없다.
사용자가 기다릴 필요가 없다는 것은 그만큼 더 좋은 사용자 경험을 제공하는 것이다.
공식문서에 따른 두 가지 방법이 있다.