시작하기

Suspensive로 3분 만에 비동기 안전한 React 페이지를 만들어 보세요.

패키지 설치


npm install @suspensive/react


pnpm add @suspensive/react


yarn add @suspensive/react


bun add @suspensive/react

ErrorBoundary와 Suspense로 앱 감싸기

수동 로딩/에러 상태 체크를 선언적 바운더리로 대체하세요:


import { ErrorBoundary, Suspense } from '@suspensive/react'
 
function App() {
  return (
    <ErrorBoundary
      fallback={({ error, reset }) => (
        <div>
          <p>Something went wrong: {error.message}</p>
          <button onClick={reset}>Try again</button>
        </div>
      )}
    >
      <Suspense fallback={<div>Loading...</div>}>
        <UserProfile />
      </Suspense>
    </ErrorBoundary>
  )
}

clientOnly로 SSR 건너뛰기

서버에서 렌더링하지 않을 서브트리는 <Suspense/>에 clientOnly를 사용하세요:


import { Suspense } from '@suspensive/react'
 
function Page() {
  return (
    <Suspense fallback={<Skeleton />} clientOnly>
      <UserProfile />
    </Suspense>
  )
}

ErrorBoundaryGroup으로 에러 바운더리 일괄 리셋

prop drilling 없이 여러 에러 바운더리를 한 번에 리셋하세요:


import { ErrorBoundary, ErrorBoundaryGroup } from '@suspensive/react'
 
function Dashboard() {
  return (
    <ErrorBoundaryGroup>
      <ErrorBoundaryGroup.Consumer>
        {({ reset }) => <button onClick={reset}>Reset All</button>}
      </ErrorBoundaryGroup.Consumer>
      <ErrorBoundary fallback={<UserError />}>
        <UserSection />
      </ErrorBoundary>
      <ErrorBoundary fallback={<StatsError />}>
        <StatsSection />
      </ErrorBoundary>
    </ErrorBoundaryGroup>
  )
}

다음 단계

<Suspense/> — clientOnly로 바운더리에서 SSR을 건너뛰고, DefaultProps 지원
<ErrorBoundary/> — shouldCatch 필터링을 지원하는 고급 에러 처리
Suspensive vs react-error-boundary — 상세한 기능 비교