[Data Fetching] (5) LoadingUI Next.js Beta Docs

https://beta.nextjs.org/docs/routing/loading-ui
위 문서에 대한 번역을 진행합니다.

번역시점은 2023-05-02로 공식문서의 추가적인 업데이트가 있을 수 있습니다.
번역기와 챗지피티에 의존해서 번역하고있습니다.
번역체를 자연스러운 어투로 옮기는 과정에서 오역이 발생할 수 있는 점 미리 알립니다.
한글로 번역하는 것이 더 어색한 단어의 경우 원문을 먼저 표기하겠습니다.
 
역자의 개인적인 의견에 대한 내용은

이 안에서 이루어집니다.

Loading UI

Nextjs 13은 새로운 파일 컨벤션을 도입했습니다. loading.js가 바로 그것입니다.

loading.js는 React Suspense로 의미있는 loading ui를 만들 수 있도록 지원해줍니다.

이 컨벤션을 사용하면 경로 세그먼트의 콘텐츠가 로드되는 동안 서버에서 즉시 로딩 상태를 표시할 수 있고

렌더링이 완료되면 새 콘텐츠가 자동으로 교체됩니다.

 

Instant Loading States

Instant Loading States는 탐색시 즉시 표시되는 fallback UI입니다.

스켈레톤, 스피너와 같은 로딩 표시기를 미리 렌더링하거나 표지 사진, 제목 등과 같이 작지만 의미있는 부분을 향후 화면에 표시할 수 있습니다.

이를 통해 사용자가 앱이 반응하고 있음을 이해하고 더 나은 사용자 경험을 제공할 수 있어요

폴더내에 loading.js 파일을 추가하는 것을 통해 로딩 상태를 생성합니다.

 

같은 폴더에서 loading.js는 layout.js안에 중첩됩니다.

page.js 파일과 그 아래의 모든 하위파일을 <Suspense>바운더리로 감싸게됩니다.

Good to know

- 서버 중심 라우팅을 사용하더라도 네비게이션이 즉시 실행됩니다.
- 네비게이션은 중단 없이 진행되므로 경로를 변경할 때 경로의 콘텐츠가 완전히 로드될 때까지 기다렸다가 다른 경로로 이동할 필요가 없습니다.
- 새 경로 세그먼트가 로드되는 동안 공유 레이아웃은 대화형 상태로 유지됩니다.

Manually Defining Suspense Boundaries

Loading.js외에도 자체 UI 컴포넌트에 대한 서스펜스 바운더리를 수동으로 생성할 수도 있습니다.

권장사항 : Next.js가 이 기능을 최적화하므로 경로 세그먼트(레이아웃 및 페이지) 에 loading.js 규칙을 사용하세요

서스펜스 바운더리를 사용하는 방법을 알아보려면 React 문서를 참조하세요