컴포넌트가 일시 중단되면 가장 가까운 부모 Suspense 컴포넌트가 대체 내용을 표시합니다.

• 이를 통해 여러 개의 Suspense 컴포넌트를 중첩하여 로딩 시퀀스를 생성할 수 있습니다.
• 각 Suspense 경계의 대체 내용은 다음 수준의 컨텐츠가 사용 가능해질 때까지 채워집니다.

예를 들어, <Albums/> 목록에 자체 대체 내용을 지정할 수 있습니다.

<Suspense fallback={<BigSpinner />}>
  <Biography />
  <Suspense fallback={<AlbumsGlimmer />}>
    <Panel>
      <Albums />
    </Panel>
  </Suspense>
</Suspense>

이 변경으로 인해, <Biography/> 컴포넌트는 <Albums/> 의 로딩을 기다릴 필요가 없습니다.

순서는 다음과 같습니다.

1. 만약 <Biography/> 컴포넌트가 아직 로드되지 않았다면, 전체 콘텐츠 영역에 대신 <BioSpinner/> 가 표시됩니다.
2. *<Biography/> 컴포넌트가 로드를 마치면, <BioSpinner/> 에서 콘텐츠로 대체됩니다.*
3. 만약 <Albums/> 이 아직 로드되지 않았다면, <Albums/> 와 해당 부모 패널을 대신해서 <AlbumsGlimmer/> 가 표시됩니다.
4. 마지막으로, <Albums/> 이 로드를 마치면, <AlbumsGlimmer/> 가 콘텐츠로 대체됩니다.

*Suspense 경계를 사용하면 UI의 어떤 부분이 항상 동시에 등장해야 하는지, 어떤 부분이 로딩 상태의 연속으로 더 많은 콘텐츠를 점진적으로 공개해야 하는지를 조정할수 있습니다.*

앱의 나머지 동작에 영향을 미치지 않고 트리의 어느 곳이든 Suspense 경계를 추가, 이동 또는 삭제할 수 있습니다.

<aside> ⚠️ *모든 컴포넌트 주위에 Suspense 경계를 넣지 마세요.

Suspense 경계는 사용자가 경험해야 하는 로딩 순서보다 더 작게 세분화되어서는 안 됩니다. 디자이너와 함께 작업한다면, 로딩 상태를 어디에 배치해야 하는지 물어보세요. 아마 이미 디자인 와이어 프레임에 포함되어 있을 것입니다.*

</aside>