[NextJS] loading.js: 전체 로딩 UI 설정

loading.js

: 콘텐츠가 완전히 로드되기 전에 사용자에게 로딩 중임을 알리는 UI를 제공한다.

• loading.js 파일을 해당 페이지나 라우트에 위치시켜면, Next.js가 자동으로 이 파일을 감지하고 로딩 상태에서 loading.js에 정의된 UI를 표시한다.
• 로딩 표시기나 표지 사진, 제목 등 화면의 작지만 의미 있는 부분을 미리 렌더링할 수 있다.
• 특징
  
  • 즉각적인 로딩 UI
    
    • route 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로딩 상태를 표시할 수 있다.
      
      • 즉시 로딩 상태: 탐색 시 즉시 표시되는 대체 UI
  • React Suspense 활용
    
    • 렌더링이 완료되면 새 콘텐츠가 자동으로 교체된다.

 

---

 

Routing: Loading UI and Streaming | Next.js

 

 

All Courses – 노마드 코더 Nomad Coders