@suspensive/react: 코어 프리미티브

Suspense: SSR까지 고려한 래퍼

@suspensive/react의 Suspense는 React의 Suspense를 감싸면서 clientOnly 옵션을 더한다. 서버에서는 fallback만 그리고, 클라이언트에서 실제 내용을 렌더해 하이드레이션 불일치를 피한다.

import { Suspense } from "@suspensive/react";
 
<Suspense clientOnly fallback={<Skeleton />}>
  <Chart />
</Suspense>;

Delay: 순간 깜빡임 방지

로딩이 아주 빠르면 스피너가 번쩍이고 사라져 오히려 거슬린다. Delay는 지정한 시간이 지나야 children을 보여준다.

<Suspense fallback={<Delay ms={200}><Spinner /></Delay>}>
  <List />
</Suspense>

ErrorBoundary와 ClientOnly

ErrorBoundary는 fallback에 에러와 reset을 넘겨주는 렌더 프롭을 받고, ClientOnly는 브라우저에서만 렌더해야 하는 영역을 감싼다.

<ErrorBoundary
  fallback={({ error, reset }) => (
    <button onClick={reset}>다시 시도 ({error.message})</button>
  )}
>
  <Widget />
</ErrorBoundary>