NextJs - getServerSideProps async await, Promise.all

아래 예제에는 NextJs 안에서 getServerSideProps 안에서 one, two, three까지 3개에 api에 요청하여 데이터를 가져오고 있습니다. 가져오는 데이터의 크기가 크지 않다면 이렇게 사용할 수 있지만, 가져오는 데이터의 크기가 크거나, 3개의 api요청이 아닌 1000개의 api요청 같을 때는 느려질 수 있습니다. 어떻게 고칠 수 있을까요?

example)

export const getServerSideProps = async function (ctx) {
    const one = await fetchJson(`${process.env.NEXT_PUBLIC_ENV_VARIABLE}/api/~`, {
        method: 'GET',
    });

    const two = await fetchJson(`${process.env.NEXT_PUBLIC_ENV_VARIABLE}/api/~`, {
        method: 'GET',
    });

    const three = await fetchJson(`${process.env.NEXT_PUBLIC_ENV_VARIABLE}/api/~`, {
        method: 'GET',
    });

    return {
        props: {
            one,
            two,
            three
        },
    }
};

fetchJson는 받아온 api를 json으로 변환하는 함수입니다.

위 예제에서는 one을 가져온 뒤 two를 가져오고, two를 가져온 뒤 three를 가져오는 순으로 실행하고 있습니다.

Async/await를 이용한 위 코드를 함수 블럭에 여러 개의 await 키워드를 사용하면 Promise가 fulfilled되기 전 까지 다음 await 을 차단하는데 동기적으로 작동하게 됩니다. Promise.all() 메서드를 사용하여, 기존의 api요청들을 병렬적으로 처리하여 바꾸어보겠습니다. async await과 Promise.all의 차이점을 알고싶다면, 이곳을 참고하세요! 

export const getServerSideProps = async function (ctx) {
    const [one, two, three] = await Promise.all([
        fetchJson(`${process.env.NEXT_PUBLIC_ENV_VARIABLE}/api/~`, {
            method: 'GET',
        }),
        fetchJson(`${process.env.NEXT_PUBLIC_ENV_VARIABLE}/api/~`, {
            method: 'GET',
        }),
        fetchJson(`${process.env.NEXT_PUBLIC_ENV_VARIABLE}/api/~`, {
            method: 'GET',
        }),
    ]);

    return {
        props: {
            one,
            two,
            three
        },
    }
};

Promise.all() 메서드를 이용하여 위와 같이 바꿔보았습니다.

예를 들면, 기존에는 one, two, three 함수가 각각  1,2,3초씩 가져온다면, 적용 이후 병렬적으로 처리가 되어 제일 시간이 긴 3초 후에 Promise를 반환합니다. 하지만, Promise.All을 사용하면 요청 중에 하나가 reject 되면 전체의 요청은 즉시 reject되는 점이 있습니다.

 

이때는 Promise.allSettled() 메서드를 이용하여 병렬로 요청을 진행하되 한 요청이 실패해도 다른 요청들은 보존하여 설계해야 합니다.

 

출처: 

https://velog.io/@denmark-banana/Nextjs-SSR-PromiseAllSettled

https://code-masterjung.tistory.com/91