[Next.js] Loading UI

Next.js는 어떤 순서로 화면을 보여줄까?

Next.js 앱 라우팅 구조에서는 사용자가 페이지를 방문할 때 가장 먼저 보여주는 UI 요소들이 있다.

사용자가 특정 페이지로 이동했을 때 전체 페이지를 기다릴 필요 없이,

부분적으로 먼저 보여줄 수 있는 UI를 Next.js가 자동으로 렌더링해준다.

• layout.tsx
• page.tsx에 도달하기 전에 보여주는 일부 UI (ex. Navigation)
• loading.tsx

---

loading.tsx란?

Next.js가 React의 Suspense 기능을 활용하여 콘텐츠가 로드되는 동안 보여줄 UI를 만드는 데 사용된다.

app/
 └── movies/
      ├── page.tsx         // 실제 페이지
      └── loading.tsx      // 페이지가 준비되기 전 보여줄 UI

 

• 사용자가 /movies 페이지로 이동하면,
• page.tsx가 로딩되는 동안 먼저 loading.tsx의 UI가 사용자에게 즉시 보여짐.
• 페이지 렌더링이 끝나면 loading.tsx는 사라지고 실제 page.tsx가 나타남.

---