Suspense

Suspense

컴포넌트의 렌더링을 어떤 작업이 끝날 때까지 잠시 중단시키고 다른 컴포넌트를 먼저 렌더링할 수 있는 기능

리엑트에게 컴포넌트에 필요한 데이터가 아직 준비가 되지 않았다고 알려주는 메커니즘

• SSR에서 Hydration 과정이 일어나기 전 필요한 모든 데이터를 로드해주어야 한다. (SSR 단점)

• 다음 단계로 넘어가기 전 모든것이 준비되어야 하는 상황은 효율적이지 않는다.

• 앱을 여러 부분으로 나누었을 때 준비가 빨리 된 컴포넌트는 그렇지 못한 컴포넌트들이 모두 준비될 때까지 기다려야하므로 비효율적이게 된다.

import { Suspense } from 'react';

const App = () => {
  return <Layout>
    <Suspense fallback={<Skeleton />}>
      <Sidebar />
    </Suspense>
    <Suspense fallback={<Skeleton />}>
      <Post />
    </Suspense>
    <Suspense fallback={<Skeleton />}>
      <Comments />
    </Suspense>
  </Layout>
}

React 18에서의 Suspense

• SSR에서 Suspense가 동작 하도록 추가 되었다.

• <Suspense> 를 사용하여 앱을 더 작은 독립적인 단위로 나누어 다른 컴포넌트의 렌더링을 차단하지 않는다.

• 결과적으로 앱 사용자는 화면의 컨텐츠를 더 빨리 확인하고 더 빨리 인터렉션이 가능하게 된다.