독립 서버 요청을 동시에 시작해 waterfall을 줄입니다.
서로 의존하지 않는 데이터는 Promise를 먼저 만들고 Promise.all로 함께 기다립니다. 총 대기 시간이 각 요청의 합이 아니라 가장 느린 요청에 가까워집니다.
하나의 실패가 전체를 막아야 하는지 부분 결과를 보여줄지 제품 요구에 맞게 결정합니다.
중복되는 동일 요청은 Next와 React의 캐시 동작 및 데이터 소스 특성을 확인합니다.
두 번째 요청이 첫 번째 결과를 쓰지 않는데도 순차 await하지 마세요.
로컬 프로젝트에서 확인해보세요공지 Promise를 추가하고 세 결과를 병렬로 표시하세요.
async function getCourse() {
await new Promise((r) => setTimeout(r, 300));
return "Next.js";
}
async function getProgress() {
await new Promise((r) => setTimeout(r, 400));
return 68;
}
export default async function Page() {
const [course, progress] = await Promise.all([getCourse(), getProgress()]);
return (
<main>
<h1>{course}</h1>
<p>진도 {progress}%</p>
</main>
);
}