nextjs
CHAPTER 15 / 34
읽기 약 2분
SYNTAX
loading.tsx & Suspense 해부
핵심 개념
loading.tsx는 페이지 로딩 중 자동으로 표시됩니다. React Suspense를 기반으로 합니다. 스켈레톤 UI로 사용자 경험을 개선합니다.
코드 분석
LOADING UI
// app/units/loading.tsx
export default function Loading() {
return (
<div className="skeleton">
// 스켈레톤 UI
</div>
)
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'loading.tsx & Suspense' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'loading.tsx & Suspense'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'loading.tsx & Suspense' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'loading.tsx & Suspense' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
loading.tsx & Suspense 해부는 이 3가지만 확실히 잡으세요
1.데이터 로딩 중 빈 화면이 보이면 사용자가 페이지가 고장났다고 생각해서 이탈합니다
2.loading.tsx는 해당 라우트의 로딩 UI를 자동으로 표시하고, Suspense는 컴포넌트 단위로 로딩 경계를 설정합니다
3.다음 챕터에서 에러를 우아하게 처리하는 error.tsx와 not-found.tsx를 배웁니다
공유하기
진행도 15 / 34