리액트 리소스 로딩 속도 개선하기

최근 나는 회사 업무로

약관 동의를 구하는 화면을 개발하고 있다.

 

사용자가 약관 동의하기를 누르면 약관서를 서버로 부터 다운받아서 PDF로 보여주는데

우리 PO가 이 PDF 로딩이 너무 느리다는 QA를 남겼다.

 

처음엔 당황스러웠다.

로딩 속도는 네트워크 속도에 달려있는데 프론트엔드 개발자가 개선이 가능한가?

생각난 방법은 흔히 next.js의 image 컴포넌트에서 priority를 설정하듯이 html 첫 부분에서 리소스를 다운받게 하는 방법도 있지만

PO가 원하는 수준의 개선은 어려워 보였다.

 

고민하고 삽질한 시간은 길었지만 결론을 말하자면 브라우저의 캐시 정책을 이용하기로 했다.

브라우저는 리소스를 네트워크에서 다운로드 받으면 메모리 캐시 또는 디스크 캐시에 보관하는데

크기가 큰 pdf 파일 같은 경우는 디스크 캐시에 보관한다.

그러다가 다음에 같은 요청이 있게 되면 네트워크에서 가져오지 않고 디스크 캐시에서 가져온다.

물론 cache-control 헤더를 확인하는 것이 필요하다.

 

필요한 PDF 파일들을 이전 페이지에서 미리 prefetch 하도록 개선했고

PDF 파일이 여러 개지만 사용자는 파일을 순차적으로 본다는 특징을 이용해서 첫 PDF 파일을 우선순위로 받도록 개선했다.

좀 더 개선해서 PDF 파일을 보여주기 위한 번들 JS 파일들을 미리 가져온 것도 방법이었다.

 

즉, 실제 다운로드 받는 속도 자체를 빠르게 할 수는 없지만 다운로드 시작 지점을 앞당기고 필요할 것으로 예측되는 것을 먼저 받게 하는 방식으로 사용자 경험을 개선할 수 있었다.

미리 받아놓으면 브라우저에서 캐시하기 때문에 위 방법이 가능한 것이다. 브라우저에서 알아서 처리하기 때문에 요청만 하도록 하면 돼서 코드가 짧다.

 

아래 함수를 useEffect를 통해 실행시키는 것이 전부다.

 

 const prefetchPdfFiles = (pdfUrls: string[]) => {
    Promise.all(pdfUrls.map((url) => fetch(url)));
  }