Suspense

@suspensive/react의 <Suspense/>는 React의 Suspense (opens in a new tab)가 됩니다.

props.fallback

fallback은 react의 Suspense의 fallback와 동일하게 동작합니다.

import { Suspense } from '@suspensive/react'
 
const Example = () => (
  <Suspense fallback={<Loading />}>
    <Children />
  </Suspense>
)

💡

Default fallback

<Suspense/>는 <SuspensiveProvider/>와 함께 사용할 때 더욱 강력해집니다. <SuspensiveProvider/>를 사용하여 여러 <Suspense/>의 default fallback를 제어합니다. 자세한 내용은 <SuspensiveProvider/> 페이지에 소개되어 있습니다.

서버사이드 렌더링을 피하기 (clientOnly)

clientOnly prop을 사용하면 <Suspense/>는 서버에서는 fallback을 반환합니다. mount 후(클라이언트에서는) children을 반환합니다. mount는 클라이언트에서만 일어나기 때문에 서버사이드 렌더링을 피할 수 있습니다.

import { Suspense } from '@suspensive/react'
 
const Example = () => (
  <Suspense clientOnly fallback={<Loading />}>
    <Children />
  </Suspense>
)

SSR을 지원하도록 점진적으로 마이그레이션하기 (<Suspense clientOnly/> -> <Suspense/>)

React.Suspense를 SSR과 CSR에서 모두 사용하고 싶다면 <Suspense clientOnly/>에서 <Suspense/>로 점진적으로 마이그레이션하면 쉽게 적용할 수 있습니다.

withSuspense

🚫

deprecated: wrap.Suspense().on을 사용하세요

withSuspense를 사용하면 컴포넌트를 <Suspense/>로 쉽게 래핑할 수 있습니다. 아래와 같이 withSuspense를 사용하면 이를 감싸기 위해 불필요한 코드를 만들 필요가 없습니다. withSuspense의 두 번째 인자는 children이 없는 <Suspense/>의 props입니다.

import { withSuspense } from '@suspensive/react'
 
const Example = withSuspense(
  function Component() {
    // code make suspending
 
    return <>...</>
  },
  { fallback: <Spinner /> }
)

설치하기 <ErrorBoundary/>