로딩 상태

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

async page는 가장 느린 load 속도만큼만 빠릅니다. Next.js가 대기하는 동안, 사용자는 정확히 무엇을 보게 될까요?

페이지 옆에 loading.jsx를 두면 답은 다음과 같습니다: 원하는 모든 것.

app/
    slow/
        page.jsx       the async page
        loading.jsx    shown while it resolves

기본 export를 사용하는 일반적인 컴포넌트이며, 별도의 props를 받지 않습니다:

export default function Loading() {
    return <p>Loading the special…</p>;
}

직접 렌더링하거나 import할 필요가 없습니다. 페이지 옆에 해당 파일을 두면 페이지가 Suspense 경계로 감싸집니다. 이동하는 순간 Next.js가 loading.jsx를 표시하고, await 작업이 완료되면 실제 페이지로 교체되며, 주변 레이아웃은 깜빡이지 않습니다.

파일의 위치에 따라 두 가지 결과가 따릅니다:

나란히 있는 페이지와 그 하위에 중첩된 모든 항목을 적용 대상으로 하며, 더 깊은 곳에 위치한 loading.jsx가 이를 대체할 때까지 유지됩니다.
페이지 내용만 교체됩니다: 레이아웃의 헤더와 내비게이션은 그대로 유지되며 클릭 가능한 상태로 남아 있습니다.

작성하지 않은 것에 주목해 보세요: 로딩 플래그도 없고, 상태도 없고, if (loading)도 없습니다. 파일 이름이 바로 그 메커니즘입니다.

챌린지

쉬움

app/slow/page.jsx는 느린 로드를 기다리고 있으며, app/slow/loading.jsx는 이미 존재하지만 비어 있습니다.

해당 <main> 내부에 id="loading"을 가진 <p>를 추가하세요.
텍스트는 정확히 Loading the special...이어야 합니다.

페이지와 lib/data.js는 잠겨 있습니다. 테스트는 /slow로 이동하여 데이터가 도착하기 전 화면을 확인합니다.

직접 해보기

import './globals.css';

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

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