loading.tsx & Suspense — 로딩 UI 자동화
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. `app/dashboard/loading.tsx` 파일을 만들면 어떤 동작이 자동으로 적용되는가?
💡 loading.tsx는 Next.js가 자동으로 해당 라우트의 page.tsx를 Suspense로 감싸는 파일 컨벤션입니다. page.tsx의 데이터 페칭이 완료될 때까지 loading.tsx가 fallback으로 표시됩니다.
Q2. Streaming SSR의 핵심 장점은?
💡 Streaming SSR은 서버가 HTML을 청크(chunk) 단위로 스트리밍합니다. 사용자는 전체 준비를 기다리지 않고 빠르게 첫 화면을 볼 수 있으며, 나머지는 준비되는 대로 채워집니다.
Q3. 대시보드에서 3개의 독립적인 데이터 섹션이 있을 때 가장 좋은 Suspense 전략은?
💡 각 섹션을 독립적인 Suspense로 감싸면, 각 컴포넌트가 준비되는 순서대로 사용자에게 표시됩니다. 가장 빠른 데이터가 먼저 보이므로 UX가 향상됩니다.
Q4. Suspense fallback에 넣기에 가장 적합한 컴포넌트는?
💡 Suspense fallback에는 실제 콘텐츠와 동일한 레이아웃의 스켈레톤 UI를 넣는 것이 가장 좋습니다. 레이아웃 이동(CLS)을 최소화하고 사용자에게 로딩 중임을 자연스럽게 알려줍니다.
Q5. loading.tsx와 직접 Suspense 경계 설정의 차이점으로 올바른 것은?
💡 loading.tsx는 해당 라우트의 page.tsx 전체를 대상으로 하는 편리한 파일 컨벤션입니다. Suspense를 직접 사용하면 특정 컴포넌트 단위로 세밀하게 로딩 경계를 설정할 수 있어 더 유연합니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.