[Study-Mate] 성능 최적화 1. SSR 처리

기존 코드

 

UI 파일에서 위와 같이 ReactQuery를 이용하여 데이터를 페칭함

 

 

 

Lighthouse 테스트를 해본 결과 SI(콘텐츠가 시각적으로 표시되는 진행 속도)가 너무 낮은 것을 확인하였다.

Performance를 확인해봤다.

SSR 전 Performance

 

그래프가 높은 부분을 보고 시간이 제일 오래 걸리는 것을 추적해보니 UI에서 실행중인 함수들인 것으로 확인 됐다.

 

 

그래서 서버에서 미리 데이터를 페칭하여 ui단으로 보내주는 SSR 처리를 하였고 병렬로 처리할 수 있게 하였다.

 

SSR 로 데이터를 페칭하여 UI에 보냄

 

 

그 후 Performance 확인

 

그 결과 전체 시전 시간도 2,100ms 정도로 짧아지고

빨간 부분도 줄어든 것으로 확인 됐다.

 

 

 

SSR 적용 후 Lighthouse 점수도 현저히 높아진 것을 확인했다.