서버 컴포넌트에서 비동기 데이터를 기다려 렌더합니다.
Server Component는 async 함수가 될 수 있어 데이터 요청을 await한 뒤 JSX를 반환합니다. 요청을 데이터가 필요한 컴포넌트 가까이에 두면 경계가 분명해집니다.
독립 요청은 Promise.all로 병렬화해 순차 waterfall을 줄입니다.
오류, 빈 결과, 시간 제한과 재시도 정책을 데이터 계층에서 명시합니다.
서로 독립된 요청을 차례로 await하면 전체 응답 시간이 합산됩니다.
로컬 프로젝트에서 확인해보세요두 번째 독립 Promise를 추가해 Promise.all로 함께 기다리세요.
async function getCourse() {
return Promise.resolve({ title: "Next.js 서버 렌더링", lessons: 18 });
}
export default async function Page() {
const course = await getCourse();
return (
<main>
<h1>{course.title}</h1>
<p>{course.lessons}개 강좌</p>
</main>
);
}