<Suspense>

<Suspense>

Next.js 13을 공부하는데, Next의 loading UI가 React의 Suspense와 함께 사용된다는 것을 보고, 잘 모르는 부분이었기에 겸사겸사 공부할겸 기록을 남긴다.

 

function Comp() {
  const { data } = apiClient.read('api/user');
  return (
    <div>{data.name}<div/>
  )
}

function App() {
  return (
    <Suspense fallback={<Loading/>}> // 두번째 로딩 UI
      <Suspense fallback={<Spinner/>}> // 첫번째 로딩 UI
        <Comp/> // 성공 UI
      </Suspense>
    </Suspense>
  )
}

사용법도, 생김새도 매우매우 직관적이다. 

• fallback: 로딩이 완료되지 않은 경우 children(SomeComponent)을 대체할 UI이다. 어떤 React 노드(jsx)든 괜찮지만, 주로 로딩 스피너나 스켈레톤과 같은 가벼운 플레이스홀더 뷰를 사용한다. chidren의 로딩여부에 따라 fallback으로의 전환이 이루어지고, 만약 fallback이 일시중단되는 일이 생기면 children(SomeComponent)의 가장 가까운 상위 Suspense경계가 활성화된다. -> 위의 코드에서 <Loading UI/>가 보여진다.

 

주의해야할 점

• <Suspens>의 children에 너무 많은 컴포넌트를 배치하지 말 것
  • <Suspens>의 children은 하나의 묶음 덩어리다. 만약 4개의 children이 있다고 가정했을 때 3개의 children의 데이터가 준비도었다 하더라도, 나머지 1개의 children이 준비될때까지 기다렸다가  4개의  4개이 모두 준비되었을때 비로소 children이 보여진다.