두 개의 Fetch 동시에 처리하기

Coddy React 여정의 Next.js 핵심 (Next.js Essentials) 섹션에 포함된 레슨 — 47개 중 25번째.

페이지에는 보통 두 가지 이상의 작업이 필요합니다. 이를 작성하는 가장 명확한 방법은 가장 느린 방법이기도 합니다:

const dishes = await getDishes();   // 60ms
const drinks = await getDrinks();   // 60ms, 이제야 시작
// 총: 120ms

await는 여기서 멈춘다는 것을 의미합니다. 두 번째 로드는 첫 번째 로드의 결과가 전혀 필요하지 않음에도 불구하고, 첫 번째 로드가 끝날 때까지 시작조차 하지 않습니다.

둘 다 시작한 다음, 둘 다 기다립니다:

const [dishes, drinks] = await Promise.all([
    getDishes(),
    getDrinks(),
]);
// 총: 60ms

핵심은 타이밍에 있습니다. await 없이 getDishes()를 호출하면 작업을 시작하고 즉시 프로미스를 반환하므로, Promise.all이 대기하기 시작하는 시점에는 두 `loads`가 이미 실행 중인 상태가 됩니다. 이는 명시한 순서대로 결과의 배열로 해석(resolve)됩니다.

기본 원칙:

하나의 로드가 다른 로드의 결과를 필요로 하는 경우 → 순차적인 await를 사용하며, 다른 방법이 없습니다.
서로 독립적인 경우 → Promise.all을 사용합니다.

Two loads는 작은 이점입니다. 5개는 즉각적으로 느껴지는 page와 그렇지 않은 one 사이의 차이입니다.

챌린지

쉬움

app/page.jsx는 dishes와 drinks를 순차적으로 로드합니다. 서로 의존성이 없으므로 함께 실행되도록 만드세요.

두 개의 순차적인 await를 dishes와 drinks로 구조 분해 할당하는 단일 await Promise.all([...])로 교체하세요.

lib/data.js는 잠겨 있으며, 두 로드가 오버랩되었는지(overlapped) 감시합니다. #report는 Ran one at a time 대신 Ran together를 출력해야 합니다.

직접 해보기

import './globals.css';

export const metadata = {
    title: 'My App',
};

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                {children}
            </body>
        </html>
    );
}