[TIL] fetching 최적화

페이지를 구성하다보면 데이터를 fetching해와서 해당 내용을 보여줘야 할 때가 있다.

가장 기본적인 방법인 async/await를 써서 데이터를 fetching할 수 있다.

const movie = await getMovie(id);

이 방식은 하나만 가져오면 문제가 없겠지만, 두개 이상 혹은 그보다 더 많은 fetching이 필요하면 실행 시간이 계속해서 쌓여 화면 출력이 늦어게 된다. -> 사용자 경험 저하로 이어짐

const movie = await getMovie(id); // 5초
const videos = await getVideos(id); // 6초
const desc = await getDesc(id); // 7초

// 5 + 6 + 7 = 18초

위와 같은 경우, 모든 데이터 fetching이 끝나는데 총 18초가 걸리게된다.

이를 해결하기 위해 Promise.all을 사용할 수 있다.
Promise.all을 사용하면, 여러개의 fetching 작업을 병렬적으로 시작해서 마지막에 끝난 작업을 기준으로 동시에 작업을 끝마칠 수 있다.

const [movie,videos,desc] = await Promise.all([getMovie(id), getVideos(id), getDesc(id)]);
// 총 7초

순서대로 각각 5초, 6초, 7초 걸리던 작업을 7초(가장 마지막에 완료된 작업)만에 전부 완료할 수 있게된다.