비동기 컴포넌트

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

지난 장에서 설정한 모든 것에 대한 결실이 여기에 있습니다. 서버 컴포넌트는 async일 수 있습니다:

import { getDishes } from '../lib/data';

export default async function Page() {
    const dishes = await getDishes();

    return <h1>{dishes.length} dishes</h1>;
}

이 구문을 다시 읽어보세요. 참으로 새로운 개념입니다. 컴포넌트는 대기합니다. Next.js는 서버에서 이를 실행하고, await가 끝날 때까지 기다린 다음, 그제야 결과를 HTML로 변환합니다.

그렇지 않고 브라우저 전용으로 작성했을 버전과 비교해 보세요:

페이지가 먼저 빈 상태로 렌더링됩니다
페이지가 로드된 후에 요청이 나갑니다
일부 상태가 전환되고 콘텐츠가 표시되는데, 이는 사용자가 매번 보게 되는 깜빡임(flicker)입니다

async server 컴포넌트를 사용하면 첫 번째 빈 렌더링이 없습니다. HTML이 빌드될 때 data가 이미 존재했기 때문에 깜빡거리며 전환될 것이 없습니다. useEffect도, 로딩 플래그도, 두 번째 요청도 필요 없습니다.

다음 두 가지 규칙에 의해 이것이 허용됩니다:

server 컴포넌트만 async가 될 수 있습니다. 'use client'로 표시된 컴포넌트는 허용되지 않습니다.
데이터는 데이터베이스, 파일 또는 lib/data.js와 같이 서버가 접근할 수 있는 곳에서 와야 합니다.

챌린지

쉬움

lib/data.js file이 제공되며 잠겨 있습니다. 이 파일은 { id, name } 객체 배열의 Promise를 반환하는 getDishes()를 내보냅니다.

app/page.jsx의 Page를 async function으로 만드세요.
getDishes()를 await하여 dishes 변수에 할당하세요.
<ul id="dish-list"> 내부에서 dish당 하나의 <li>를 렌더링하고, key={dish.id}, id={dish.id} 및 dish의 name을 텍스트로 설정하세요.

useEffect나 로딩 플래그 없이 오직 await만 사용하면 됩니다.

직접 해보기

import './globals.css';

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

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