[Next JS] Parallel Data Fetching으로 바꾸기

Sequential Data Fetching 하던 작업을 Parallel Data Fetching으로 바꾸었다

오늘 작업한 코드 중 일부를 봐보자

Sequential Data Fetching

const userInfo = await getUserInfo(slug);
const defaultTags = await getDefaultTags();

return( ... components )

Sequential Data Fetching에서는 userInfo를 받아오고 그 후에 defaultTags를 받아온다

Parallel Data Fetching

const userData = getUserInfo(slug);
const defaultTagsData = getDefaultTags();

const [userInfo, defaultTags] = await Promise.all([
    userData,
    defaultTagsData,
]);

Parallel Data Fetching에서는 getUserInfo가 다 실행될때까지 기다리지 않고 getDefaultTags도 거의 동시에 실행이 된다. 그 후 Promise.all()을 통해 모든 프로미스가 완료되면 해당 데이터를 반환한다!

Parallel Data Fetching을 하면 Sequential Data Fetching보다 시간을 줄일 수 있다

fetch를 통해 받아오는 데이터가 다음 fetch를 필요한 경우를 제외하면 Parallel Data Fetching을 사용하자..!